vue3调用子组件的方法

// 父组件 ParentComponent.vue

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

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childComponent = ref(null);

    const callChildMethod = () => {
      if (childComponent.value) {
        childComponent.value.childMethod();
      }
    };

    return {
      childComponent,
      callChildMethod
    };
  }
};
</script>

// 子组件 ChildComponent.vue

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

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

解释说明：

1. 父组件 (ParentComponent.vue):

   • 使用 ref 来引用子组件实例 (ChildComponent)。
   • 在 setup 函数中定义了一个 callChildMethod 方法，该方法通过 childComponent.value.childMethod() 调用子组件的 childMethod 方法。
   • 当点击按钮时，触发 callChildMethod 方法。

2. 子组件 (ChildComponent.vue):

   • 定义了一个 childMethod 方法，在控制台输出一条消息，表示方法被调用。

这样，父组件就可以通过 ref 引用来调用子组件的方法。