vue3实现父组件调用子组件方法

要实现父组件调用子组件的方法，可以使用`ref`和`teleport`两个特性来完成。

首先，在子组件中，使用`ref`创建一个引用，将需要调用的方法赋值给这个引用。例如：

<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>

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

export default {
  setup() {
    const childMethod = ref(null);

    // 子组件方法
    const childFunction = () => {
      console.log('子组件方法被调用');
    };

    // 将子组件方法赋值给引用
    childMethod.value = childFunction;

    return {
      childMethod
    };
  }
}
</script>

然后，在父组件中，通过`.value`来获取子组件的引用，然后即可调用子组件的方法。例如：

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

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

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

    // 父组件调用子组件方法
    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.childMethod.value();
      }
    };

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

通过上述方法，就可以在父组件中调用子组件的方法了。