vue2父调用子组件方法

在Vue2中，父组件可以通过以下两种方式调用子组件的方法：

1. 通过props传递方法

在父组件中定义一个方法，然后将该方法作为props传递给子组件。子组件可以通过调用该props方法来触发父组件中的方法。

父组件：

<template>
  <div>
    <child :childMethod="parentMethod"></child>
  </div>
</template>

<script>
import child from '~/components/child';

export default {
  components: {
    child
  },
  methods: {
    parentMethod() {
      console.log('父组件方法被调用');
    }
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="childMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  props: {
    childMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      this.childMethod();
    }
  }
};
</script>

2. 通过$refs调用子组件方法

在父组件中使用ref属性给子组件命名，然后通过$refs来访问子组件的方法。

父组件：

<template>
  <div>
    <child ref="child"></child>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import child from '~/components/child';

export default {
  components: {
    child
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

子组件：

<template>
  <div>
    子组件
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
};
</script>