首页怎么通过defineEmits将子组件的数据传给父组件，给我一个vue3+ts的写法

怎么通过defineEmits将子组件的数据传给父组件，给我一个vue3+ts的写法

时间: 2025-01-28 14:21:18 浏览: 51

在 Vue 3 中，使用 `defineEmits` 是为了更明确地管理父子组件之间的通信，特别是事件传递。假设我们有一个子组件想向父组件发送数据，以下是使用 `defineEmits` 的 Vue 3 + TypeScript 写法：首先，在子组件中引入 `defineEmits` 并声明它会发出的事件及其类型： ```typescript // 子组件 ChildComponent.vue.ts import { defineEmits } from 'vue'; interface EmittedData { sendData: (data: string) => void; // 接收从父组件来的调用 } export default { emits: defineEmits<EmittedData>({ sendData: (data) => this.$emit('send-child-data', data), // 发送数据到父组件 }), }; ``` 然后，在父组件模板里接收这个事件，并处理接收到的数据： ```html  <template> <ChildComponent @send-child-data="handleChildData"></ChildComponent> </template> <script lang="ts"> import ChildComponent from '@/components/ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { handleChildData(data: string): void { console.log('Received data from child:', data); // 在这里处理接收到的数据 }, }, }; </script> ``` 在这个例子中，当子组件触发 `sendData` 事件，它会把 `data` 参数传递给父组件，父组件则通过 `@send-child-data` 来监听这个事件。

阅读全文