应避免多层级组件中通过$emit逐级透传事件，因其易出错、冗余且破坏封装性；推荐使用provide/inject、pinia或mitt等更合适的通信机制。
多层级嵌套组件中自定义事件逐级透传，本质是“手动接力”，但 Vue 并不推荐这种方式——它容易出错、冗余且破坏组件封装性。真正高效的做法是：**避免逐级透传，改用更合适的通信机制**。
为什么不该靠 $emit 一层层往上冒泡
比如 A → B → C → D，D 想通知 A，若让 C $emit 给 B，B 再 $emit 给 A，就会出现：
- 中间组件（B、C）被迫承担与自身逻辑无关的事件转发职责
- 事件名易冲突或拼写错误，调试困难
- 无法跨分支（如兄弟组件间无法触发）、不能穿透异步组件或动态插槽
- Vue3 中
$listeners已被移除，$attrs默认包含所有非 prop 属性，但不自动包含事件
替代方案：用 $attrs + v-on="$attrs" 实现事件透传
适用于“包装型组件”（如自定义表单控件、按钮封装），让子组件把未声明的事件原样向下传递：
- 父组件传入事件：
<wrapper></wrapper> - Wrapper 组件不声明
@submit，也不在defineEmits中定义，直接透传：<innercomponent v-bind="$attrs"></innercomponent> - InnerComponent 接收并响应该事件（前提是它内部真正触发了同名事件）
注意：这要求事件最终由最内层组件主动 $emit，$attrs 只负责“挂载监听器”，不自动触发事件。
更合理的解法：按场景选通信方式
不是所有跨层交互都适合事件透传。优先考虑：
-
祖先→后代数据+行为下发：用
provide/inject。例如主题、国际化配置、全局操作方法（如openModal）可直接注入任意深层子组件，无需事件流转 - 状态变更需广播或响应：用 Pinia。尤其当多个无关组件需要响应同一动作（如用户登出后清空各模块缓存），Pinia 的 action 或 store 订阅更可靠
- 临时、轻量、局部联动：用 mitt 或 tiny-emitter 手动创建事件总线。比旧版 EventBus 更轻、无内存泄漏风险，适合模块内松耦合通信
如果真要模拟“冒泡式事件”，可用 emit + defineOptions（谨慎）
仅限极简场景（如表单项校验失败需向上通知 Form 组件），可在中间组件显式转发：
- 子组件触发：
this.$emit('error', msg)（Vue2）或emit('error', msg)（Vue3） - 中间组件声明接收并重发：
const emits = defineEmits(['error']); emits('error', payload) - 父组件监听同一事件名即可捕获
但务必加注释说明该组件仅为“事件中继”，且避免在业务逻辑组件中滥用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
