Vue 3 自定义事件怎么封装全局 EventBus 处理跨层级组件通信-Vue.js-PHP中文网

Vue 3 中推荐用 mitt 封装 EventBus，因其体积小、无依赖、API 简洁且规避内存泄漏；需定义类型、单例管理、按域隔离，并在 onUnmounted 中手动 off 清理监听器。

vue 3 自定义事件怎么封装全局 eventbus 处理跨层级组件通信

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>()
</dataevents></uievents></events></string>

类型约束让 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)
})