Vue 组件通信怎么通过 Emit 传递携带参数的自定义事件对象

舞姬之光

舞姬之光

2026-07-31

485人浏览

原创

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

vue 组件通信怎么通过 emit 传递携带参数的自定义事件对象

Vue 中通过 emit 传递携带参数的自定义事件,本质是子组件主动“抛出”一个带数据的信号,父组件监听并接收。关键不在“对象”本身,而在参数如何组织、声明和使用——尤其在 Vue 3 的 `<script setup>` 语法下更需注意显式声明与类型安全。</script>

明确事件名与参数结构

自定义事件名推荐用短横线格式(kebab-case),如 user-updatedform-submitted,避免与原生事件同名(比如别叫 clickinput)。参数可以是任意合法 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

在 `

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 15.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.2万人学习