Vue.js 的 $emit 本质是父子组件间显式事件触发机制，非松耦合的发布-订阅；需借助 mitt 等事件总线或 provide/inject 封装才能实现真正 Pub/Sub。
Vue.js 中的 emit 本身不是发布-订阅模式，而是一种父子组件间的**显式事件触发机制**。但它可以被合理封装和扩展，来模拟松耦合的发布-订阅行为——关键在于**避免直接引用目标组件、不依赖组件层级关系、通过统一事件中心解耦通信双方**。
emit 的本质：父子强约定，非松耦合
原生 $emit 要求子组件明确知道父组件监听了哪个事件名，父组件也必须在模板中用 @event 显式绑定。这种写法：
- 依赖组件树结构（跨级需层层透传）
- 发送方和接收方存在隐式契约（事件名、参数格式需提前约定）
- 无法实现“一个触发、多个响应”或“先订阅后触发”
所以单纯靠 $emit 不能构成真正的发布-订阅（Pub/Sub），它更接近“回调通知”。要松耦合，得引入中间层。
用 mitt 或 eventBus 实现轻量 Pub/Sub
推荐使用 mitt（Vue 官方推荐、无依赖、200B）替代 Vue 2 的 EventBus 或 Vue 3 的全局 app.config.globalProperties 挂载方式：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 创建独立事件总线：
const bus = mitt() - 任意组件发布：
bus.emit('user:login', { id: 123 }) - 任意组件订阅：
bus.on('user:login', handler)，无需关心谁发、谁收 - 支持通配符：
bus.on('user:*', handler)，适合模块化归类
这种方式下，组件只依赖 bus，彼此完全隔离，真正实现松耦合。
结合 provide/inject + emit 构建受控通信链
若需保留响应式与类型安全，又不想引入第三方库，可用 provide/inject 注入一个事件管理器：
- 在根组件或布局组件中
provide('emitter', mitt()) - 后代组件
inject('emitter')获取同一实例 - 发送方调用
emitter.emit('cart:update', item) - 接收方在
onMounted中emitter.on('cart:update', ...)，onUnmounted中off清理
比全局 bus 更具作用域意识，适合中大型应用按功能域划分通信边界。
避免常见陷阱：内存泄漏与事件泛滥
Pub/Sub 灵活但易失控，注意两点：
-
务必手动清理订阅：在
onUnmounted（Vue 3）或beforeUnmount中调用off或clearAll，否则组件销毁后监听器仍存在 -
命名空间化事件名：用
模块:动作格式（如auth:logout、product:added），避免冲突，也方便调试和批量管理 - 慎用
emit传递大量数据或复杂对象，优先传 ID 或关键字段，由接收方主动获取详情
不复杂但容易忽略。
