vue中emit传递自定义事件本质是子组件主动抛出带数据信号,父组件监听接收;需显式声明emits、规范事件命名、合理组织参数并支持类型校验。

Vue 中通过 emit 传递携带参数的自定义事件,本质是子组件主动“抛出”一个带数据的信号,父组件监听并接收。关键不在“对象”本身,而在参数如何组织、声明和使用——尤其在 Vue 3 的 `<script setup>` 语法下更需注意显式声明与类型安全。</script>
明确事件名与参数结构
自定义事件名推荐用短横线格式(kebab-case),如 user-updated 或 form-submitted,避免与原生事件同名(比如别叫 click 或 input)。参数可以是任意合法 JS 值:字符串、数字、布尔值,也可以是对象或数组。
- 单个参数直接传:
emit('data-ready', { id: 1, name: 'Alice' }) - 多个参数依次传:
emit('item-added', 'book', 29.99, true)—— 父组件事件处理器会按顺序接收这三个参数 - 对象最常用,便于扩展字段:
emit('search-changed', { keyword: 'vue', page: 1, limit: 10 })
Vue 3 中必须显式声明 emits
在 `
