vue3中使用mitt全局事件总线

一. 事件总线的基本原理

事件总线本质上是一个全局的事件管理器，提供以下功能：

• 事件发布（emit） ：发送消息通知其他订阅者某事件已发生。
• 事件订阅（on） ：监听指定事件，当事件触发时执行回调。
• 事件移除（off） ：取消事件监听，避免内存泄漏。

优点是松耦合、易扩展。

二. 如何在 Vue3 微前端项目中创建事件总线

Vue3 本身不再内置事件总线，但可以利用第三方库或自行实现。

1. 使用 mitt 创建事件总线

mitt 是一个体积轻巧、API 简单的事件发射器，适合微前端场景。

安装

npm install mitt

创建事件总线实例

// eventBus.ts
import mitt from 'mitt'

type Events = {
  'user-login': { id: number; name: string }
  'theme-change': string
  // 可根据需求定义更多事件类型
}

const eventBus = mitt<Events>()

export default eventBus

通过 TypeScript 类型定义，事件和数据结构更安全。

2. 如何使用事件总线通信

组件1发布事件通知

import eventBus from './eventBus'

function loginSuccess(user: { id: number; name: string }) {
  eventBus.emit('user-login', user)
}

组件2监听事件

import eventBus from './eventBus'
import { onMounted, onUnmounted } from 'vue'

const handler = (userInfo) => {
    console.log('收到用户登录事件:', userInfo)
} 
onMounted(() => {
    eventBus.on('user-login', handler)
})
onUnmounted(() => {
    eventBus.off('user-login', handler)
})

通过 eventBus.emit 发布事件，通过 eventBus.on 监听，实现跨组件通信。由于事件总线的监听者可能长时间驻留，务必在组件卸载时取消事件监听。