在vue3中,父组件如何在注册的子组件上调用子组件内定义的方法

在 Vue 3 中，父组件想要调用子组件内部定义的方法，通常通过`ref`、`$refs`属性或者自定义事件（$emit）来实现。以下是几种常用的方法：

1. **通过`ref`引用**:
父组件可以为子组件创建一个 `ref` 并设置为子组件实例，然后可以直接调用子组件内的方法：

   <template>
     <child-component ref="myChildComponent"></child-component>
   </template>

   <script setup>
   import { ref } from 'vue';
   const myChildComponent = ref();
   
   // 然后在需要的时候调用子组件的方法
   myChildComponent.value.myMethod();
   </script>

2. **通过 `$refs` 属性**:
当子组件渲染完成之后，`$refs` 对象会包含子组件的实际DOM元素，你可以通过这个属性间接地访问子组件的方法：

   <template>
     <button @click="callChildMethod">Call Child Method</button>
     <child-component ref="childRef"></child-component>
   </template>

   <script setup>
   const childRef = ref(null);
   const callChildMethod = () => {
     if (childRef.value) {
       childRef.value.myMethod();
     }
   };
   </script>

3. **通过自定义事件（$emit）**:
子组件可以发射一个自定义事件，将方法名作为参数传递给父组件，父组件接收到事件后再调用相应的方法：

   <!-- 子组件 -->
   <template>
     <button @click="$emit('invoke-method', 'myMethod')">Invoke Parent Method</button>
   </template>

   <!-- 父组件 -->
   <template>
     <child-component @invoke-method="handleMethodInvocation"></child-component>
   </template>

   <script setup>
   function handleMethodInvocation(methodName) {
     this[methodName](); // 调用父组件内同名的方法
   }
   </script>