vue父组件调用子组件方法

// 父组件 ParentComponent.vue
<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <ChildComponent ref="childComponent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 this.$refs 获取子组件实例并调用其方法
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

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

解释说明：

1. 父组件 (ParentComponent.vue) 中使用了 <ChildComponent>，并通过 ref 属性给子组件指定了一个引用名称 childComponent。
2. 在父组件的 methods 中定义了一个 callChildMethod 方法，该方法通过 this.$refs.childComponent 获取到子组件实例，并调用其 childMethod 方法。
3. 子组件 (ChildComponent.vue) 中定义了一个 childMethod 方法，当父组件调用时会执行相应的逻辑（例如打印一条消息）。

这种方式可以实现父组件调用子组件中的方法。