vue3中如何调用子组件的方法

在Vue3中，可以通过`ref`和`defineExpose`来调用子组件的方法。具体步骤如下：

1. 在子组件中，使用`defineExpose`暴露需要调用的方法，例如：

   <script setup>
   const DoSomeThing = () => {
     alert('点击事件');
   }
   // 输出组件的方法，让外部组件可以调用
   defineExpose({
     DoSomeThing,
   })
   </script>

2. 在父组件中，使用`ref`获取子组件的引用，并通过该引用调用子组件中暴露的方法，例如：

   <template>
     <ChildComponent ref="childItem" />
     <button @click="useChildFun">调用子组件方法</button>
   </template>
   
   <script>
   import { ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     setup() {
       const childItem = ref(null);
       const useChildFun = () => {
         childItem.value.DoSomeThing();
       };
       return {
         childItem,
         useChildFun,
       };
     },
   };
   </script>

在上述代码中，我们使用`ref`获取了子组件的引用，并将其赋值给`childItem`。然后，我们在`useChildFun`函数中通过`childItem.value.DoSomeThing()`调用了子组件中暴露的`DoSomeThing`方法。