vue3 父组件调用子组件的方法

在Vue 3中，父组件可以通过ref或者$refs来访问子组件的方法。以下是一种常见的方法：

首先，在子组件中，使用`ref`来定义一个引用：

// ChildComponent.vue
<template>
  <div>
    <button @click="childMethod">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      // 子组件的方法逻辑
      console.log('Child method called');
    }
  }
};
</script>

然后，在父组件中，使用`ref`来引用子组件，并通过该引用调用子组件的方法：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">Call child method</button>
  </div>
</template>

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

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

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

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

在上面的示例中，父组件使用`ref`来引用子组件，并通过`childRef.value.childMethod()`来调用子组件的`childMethod`方法。在父组件的模板中，通过点击按钮触发`callChildMethod`来调用子组件的方法。

这样，父组件就可以调用子组件的方法了。注意在Vue 3中，使用`ref`来引用子组件，需要使用`.value`来访问子组件实例。