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

在 Vue3 中，可以通过 `ref` 和 `setup` 函数来实现父组件调用子组件的方法。

首先，在子组件中，需要使用 `ref` 将子组件的实例对象暴露给父组件，例如：

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => {
      console.log('子组件被点击了');
    };

    // 将子组件的实例对象暴露给父组件
    const childInstance = ref(null);

    return {
      handleClick,
      childInstance,
    };
  },
});
</script>

然后，在父组件中，可以通过访问 `childInstance.value` 来获取子组件的实例，并调用子组件的方法，例如：

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

<script>
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  setup() {
    const handleChildClick = () => {
      // 获取子组件实例
      const childInstance = this.$refs.child.childInstance.value;

      // 调用子组件方法
      childInstance.handleClick();
    };

    return {
      handleChildClick,
    };
  },
});
</script>

注意，在父组件中，需要使用 `onMounted` 钩子函数来等待子组件加载完毕，否则可能会出现获取不到子组件实例的情况。