$emit 不会冒泡，仅通知直接父组件；需手动逐层 $emit 实现跨级传递，或改用 provide/inject、mitt、Pinia 等替代方案，并注意参数传递、命名规范与卸载清理。
Vue.js 中的
本身
不会冒泡
，它只向直接父组件派发事件，不支持 DOM 那样的逐层向上冒泡。所谓“冒泡机制模拟”，本质是通过手动在每一级父组件中监听并二次
，实现事件跨多层传递的效果。
为什么不能直接冒泡？
Vue 的事件系统设计为显式通信：子组件调用
，仅触发其**直接父组件**中通过
或
声明的监听器。中间层级若不主动转发，事件就终止了——这是有意为之的解耦设计，避免隐式依赖和调试困难。
手动“冒泡”的标准写法（推荐）
在每一级中间组件中，监听子组件事件并立即重新派发：
子组件（Level3）：
中间组件（Level2）：
顶层组件（Level1）：
这种链式转发清晰、可控，且保留了事件名称和参数，适合中等深度（3–4 层）的组件结构。
Vue-router参考手册
Vue-router参考手册下载
下载
立即学习
“
前端免费学习笔记（深入）
”；
替代方案：更灵活的跨层级通信
当层级变深或关系复杂时，手动转发易出错、维护成本高，可考虑以下方式：
provide / inject
：适用于祖孙组件间共享事件总线或响应式状态，但需注意响应性限制（非 reactive 对象需用
或
包裹）
全局事件总线（Vue 2）或 mitt（Vue 3）
：轻量、解耦，适合非父子关系或动态组件场景，但需手动清理监听防止内存泄漏
Pinia / Vuex 状态驱动
：把“事件意图”转为状态变更（如
），由任意组件订阅响应，更适合业务逻辑强关联的联动
注意事项与避坑点
模拟冒泡时容易忽略的关键细节：
不要在中间组件中省略
参数，否则顶层收不到原始值：
比
更安全
避免命名冲突：多层转发时统一事件名（如
），或加前缀区分来源
Vue 3 组合式 API 中，
需显式声明要转发的事件，否则 TypeScript 会报错或失去类型提示
异步操作后 emit（如 await API 调用完成）需确保组件未卸载，可用
清理或检查
$emit$emitthis.$emit('xxx')@xxxv-on:xxxthis.$emit('update-value', newValue)@update-value="handleUpdate" → handleUpdate(val) { this.$emit('update-value', val) }@update-value="onRootUpdate"refreactivestore.setValue()emitthis.$emit('change', ...arguments)this.$emit('change')input-changedefineEmitsonBeforeUnmountisCurrentInstanceAlive