vue3组合式中 子组件调用父组件方法

在 Vue 3 中，尤其是使用 Composition API 的情况下，如果你想要在子组件中调用父组件的方法，你可以通过 prop 钩子、自定义事件或者在子组件内直接访问实例的 `$parent` 对象来实现。以下是三种常见的做法：

1. **通过 Prop 钩子**：
如果父组件暴露了你需要调用的方法作为 prop，那么可以在子组件的 `setup` 函数里接收这个方法并调用它：

   // 父组件
   export default {
     methods: {
       myMethod() {
         // ...
       }
     },
     props: ['callParentMethod'],
   };

   // 子组件
   import { onMounted } from 'vue';
   setup(props) {
     onMounted(() => {
       props.callParentMethod();
     });
   }

2. **通过自定义事件（emit）**：
父组件可以发射一个事件，然后子组件监听并触发该方法：

   // 父组件
   emits(['parentMethod']);
   ...

   this.$emit('parentMethod', arg);

   // 子组件
   import { on, watch } from 'vue';
   on(this.$parent, 'parentMethod', (arg) => {
     // 调用父方法
   });

3. **直接访问 $parent**（仅适用于非父子复用的情况）：
使用 `$parent` 可以直接访问当前组件的父组件实例，但请注意这会破坏组件间的隔离性，通常只推荐在生命周期钩子等特殊场合使用：

   // 子组件
   const callParentMethod = () => {
     this.$parent.myMethod();
   };