Vue 3 中推荐用 mitt 封装 EventBus，因其体积小、无依赖、API 简洁且规避内存泄漏；需定义类型、单例管理、按域隔离，并在 onUnmounted 中手动 off 清理监听器。
Vue 3 中没有内置的全局事件总线，但你可以用轻量、可控的方式自定义封装一个 EventBus，专用于跨层级、平级甚至非关联组件间的松耦合通信。关键不是“能不能用”，而是“怎么封装才安全、可维护、不泄漏”。
选对库：mitt 比 events 更适合浏览器环境
虽然 events 库（Node.js EventEmitter 移植版）在 Vue 2 时代常用，但在 Vue 3 的纯浏览器项目中，推荐使用 mitt——它体积小（约 200 行）、无依赖、API 简洁，且天然规避了 Node 环境兼容性问题和内存泄漏风险。
- 安装：
npm install mitt - 不建议用
new EventEmitter()+ 手动 import，容易因未清理监听器导致内存泄漏 - mitt 的
off()默认移除所有同名监听器，更易控制；而 events 的off()需精确传入 listener 引用，稍不注意就失效
封装结构：单例 + 类型提示 + 按域隔离
在 src/utils/eventBus.ts（或 .js）中创建统一入口，避免到处 new 实例：
import mitt, { type Emitter } from 'mitt'
// 定义事件类型（TypeScript 推荐）
type Events = {
'user:login': { id: string; name: string }
'form:submit-success': { formId: string; data: Record<string, any> }
'notification:show': { type: 'success' | 'error'; message: string }
}
const emitter = mitt<Events>()
export default emitter
// 或导出命名空间实例，便于多域隔离：
// export const uiBus = mitt<UiEvents>()
// export const dataBus = mitt<DataEvents>()
- 类型约束让 IDE 自动提示事件名和 payload 结构，减少拼写错误
- 按业务域拆分多个 bus 实例（如
uiBus、dataBus），比单个 bus 更易追踪、调试和解耦
组件内使用：绑定生命周期，防止监听器残留
在 Composition API 中，必须在组件卸载前清除监听器。不要在 onMounted 里注册却忘了清理：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
// ComponentB.vue
import { onUnmounted } from 'vue'
import emitter from '@/utils/eventBus'
const handleLogin = (payload: { id: string; name: string }) => {
console.log('欢迎', payload.name)
}
// 注册监听
emitter.on('user:login', handleLogin)
// ⚠️ 必须清理
onUnmounted(() => {
emitter.off('user:login', handleLogin)
})
- 用箭头函数定义监听器时，无法在
off()中准确移除——务必用具名函数或 const 变量引用 - 如果只监听一次，直接用
emitter.once()，无需手动清理 - 不推荐在
setup()顶层调用on()，否则组件多次挂载会重复绑定
替代方案提醒：什么情况下不该用 EventBus
EventBus 不是万能胶。以下情况优先考虑其他方式：
- 需要响应式共享状态（如用户权限、主题色）→ 用 Pinia
- 父组件向下透传配置或上下文（如表单校验规则、国际化 locale）→ 用 provide/inject
- 仅父子通信 → 严格走 props + emits，保持数据流清晰
- 高频、复杂状态同步（如实时协作编辑）→ 考虑 WebSocket + 局部 store 或专用状态同步库
EventBus 最适合那些「发完即止」的动作型通知：提交成功弹 toast、切换标签页刷新数据、触发打印预览、全局快捷键响应等。
