vue3 <script setup> 子组件给父组件暴露方法

在 Vue 3 中，如果你想要在 script setup 版本的组件中为父组件暴露方法，可以采用以下步骤：
首先，在子组件的 script setup 代码块中定义你需要暴露给父组件的方法。例如，假设我们有一个名为 ChildComponent.vue 的子组件，里面有一个名为 sendData 的方法：
<!-- ChildComponent.vue -->
<script setup>
import { ref, onMounted } from 'vue';

const sendData = async () => {
// 假设这是子组件发送数据的具体操作
await someAsyncFunction();
};

onMounted(() => {
// 在挂载时，如果需要立即执行某个操作，可以在这里添加
});
</script>
登录后复制
接着，在 ChildComponent 的模板部分，你可以不直接暴露方法，而是使用一个事件或者回调函数的形式来调用它。比如，你可以使用 @emit 来触发一个名为 sendDataFromChild 的自定义事件：
<template>
<button @click="sendData">Send Data to Parent</button>
</template>
登录后复制
在父组件里，你监听这个事件，并在其内部调用子组件提供的方法：
<!-- ParentComponent.vue -->
<template>
<ChildComponent @sendDataFromChild="handleDataSending"></ChildComponent>
</template>

<script setup>
import { ChildComponent } from './ChildComponent.vue';

const handleDataSending = async () => {
await childComponent.sendData(); // 注意这里的 "childComponent" 必须是通过 props 接收的实例
console.log('Data sent successfully from child.');
};
</script>
登录后复制
这样，当你点击子组件的按钮时，sendData 方法就会被调用，同时父组件的 handleDataSending 方法也会被执行。