vue3调用子组件的方法

在 Vue 3 中，可以使用 `ref` 和 `teleport` 来调用子组件的方法。

1. 使用 `ref`：在父组件中，首先需要为子组件创建一个 `ref`。然后可以通过这个 `ref` 来访问子组件的方法。

   <template>
     <div>
       <ChildComponent ref="childRef"></ChildComponent>
       <button @click="callChildMethod">调用子组件方法</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` 的引用，并将其绑定到子组件上。然后在 `callChildMethod` 方法中，我们可以通过 `childRef.value` 来访问子组件实例，并调用其方法。

2. 使用 `teleport`：如果子组件不是直接嵌套在父组件中，而是通过 `teleport` 进行了传送，可以使用 `$teleport` 修饰符来访问子组件的方法。

   <template>
     <div>
       <teleport to="#destination">
         <ChildComponent></ChildComponent>
       </teleport>
       <button @click="callChildMethod">调用子