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

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

时间: 2024-12-20 19:12:23 浏览: 68

在 Vue 3 中，如果你想要在 `script setup` 版本的组件中为父组件暴露方法，可以采用以下步骤：首先，在子组件的 `script setup` 代码块中定义你需要暴露给父组件的方法。例如，假设我们有一个名为 `ChildComponent.vue` 的子组件，里面有一个名为 `sendData` 的方法： ```html  <script setup> import { ref, onMounted } from 'vue'; const sendData = async () => { // 假设这是子组件发送数据的具体操作 await someAsyncFunction(); }; onMounted(() => { // 在挂载时，如果需要立即执行某个操作，可以在这里添加 }); </script> ``` 接着，在 `ChildComponent` 的模板部分，你可以不直接暴露方法，而是使用一个事件或者回调函数的形式来调用它。比如，你可以使用 `@emit` 来触发一个名为 `sendDataFromChild` 的自定义事件： ```html <template> <button @click="sendData">Send Data to Parent</button> </template> ``` 在父组件里，你监听这个事件，并在其内部调用子组件提供的方法： ```html  <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` 方法也会被执行。

阅读全文