首页vue3+ts项目中emit传递多个值，如何接收

vue3+ts项目中emit传递多个值，如何接收

时间: 2025-06-23 09:27:54 浏览: 18

### Vue 3 和 TypeScript 中接收通过 `emit` 传递的多个值在 Vue 3 的组合式 API 结构下，组件之间的事件通信可以通过 `emit` 方法实现。当父组件监听子组件发出的自定义事件时，可以接收到由子组件发送的数据。为了处理多个返回值，在调用 `$emit` 或者使用 setup 组合式的 `emit` 函数时可以直接传入一个数组或对象作为参数[^1]： ```typescript // 子组件 ChildComponent.vue <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ emits: ['customEvent'], setup(props, context) { const handleClick = () => { const valueOne = "First Value"; const valueTwo = 42; // 发送两个值给父级组件 context.emit('customEvent', valueOne, valueTwo); }; return { handleClick, }; }, }); </script> ``` 而在父组件中，则可以在绑定事件处理器的时候解构这些参数以便于访问各个单独的变量: ```html  <template> <ChildComponent @custom-event="(val1,val2) => handleCustomEvent(val1,val2)" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import ChildComponent from './components/ChildComponent.vue'; export default defineComponent({ components: { ChildComponent, }, methods:{ handleCustomEvent(valueOne:string,valueTwo:number){ console.log(`Received ${valueOne} and number ${valueTwo}`); } } }); </script> ``` 上述例子展示了如何在一个方法内同时获取并操作来自子组件发射出来的多条数据流。值得注意的是，这里采用了解构赋值的方式简化了对接收参数的操作。

阅读全文