在 Vue 3 中，子组件可以通过多种方式与父组件进行通信，其中一种常见的方法是通过 props 和 emit 事件。此外，还有一种常见需求，即子组件调用父组件中的方法。这可以通过以下几种方式来实现：

方法 1: 使用 emit 事件

emit 事件是 Vue 提供的一种标准的组件通信方式。在子组件中触发一个事件，在父组件中监听这个事件并调用对应的方法。

父组件 (ParentComponent.vue)

<template>  
  <div>  
    <ChildComponent @myEvent="handleMyEvent" />  
  </div>  
</template>  
<script>  
import ChildComponent from './ChildComponent.vue';  
export default {  
  components: { ChildComponent },  
  methods: {  
    handleMyEvent(payload) {  
      console.log('父组件的方法被调用了', payload);  
      // 在这里执行父组件的方法逻辑  
    }  
  }  
};  
</script>  

子组件 (ChildComponent.vue)

<template>  
  <div>  
    <button @click="callParentMethod">调用父组件的方法</button>  
  </div>  
</template>  
<script>  
export default {  
  methods: {  
    callParentMethod() {  
      this.$emit('myEvent', '这是从子组件传递的参数');  
    }  
  }  
};  
</script>  

方法 2: 使用 ref 和 expose

在 Vue 3 中，expose 方法允许子组件划定对外部可见的内部功能。然后，父组件可以使用 ref 来访问这些功能。

父组件 (ParentComponent.vue)

<template>  
  <div>  
    <ChildComponent ref="childComponentRef" />  
    <button @click="callChildMethod">从父组件调用子组件的方法</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  
export default {  
  components: { ChildComponent },  
  setup() {  
    const childComponentRef = ref(null);  
    const callChildMethod = () => {  
      if (childComponentRef.value) {  
        childComponentRef.value.exposedMethod('父组件调用');  
      }  
    };  
    return {  
      childComponentRef,  
      callChildMethod  
    };  
  }  
};  
</script>  

子组件 (ChildComponent.vue)

<template>  
  <div>  
    子组件  
  </div>  
</template>  
<script>  
import { defineExpose } from 'vue';  
export default {  
  setup() {  
    const exposedMethod = (msg) => {  
      console.log('子组件方法被调用: ', msg);  
    };  
    // 定义需要向外暴露的方法  
    defineExpose({  
      exposedMethod  
    });  
  }  
};  
</script>  

另请注意

• 使用 emit 事件进行父子组件通信是 Vue 推荐的做法，因为它符合组件化设计的单向数据流原则。
• 使用 ref 和 expose 是一种更直接的方法，不过应谨慎使用，以保持组件之间的解耦性。

上述两种方法都是有效的，根据具体需求选择适合的方式来实现组件间的通信和方法调用。