Vue.js - 使用mitt实现轻量级事件总线教程（任意组件间通信）

作者：hangge | 2026-03-30 09:09

在实际的前端开发中，组件之间经常需要进行通信。对于简单结构，父子组件可以通过 props 和 emit 传递数据；但当项目结构变得复杂，例如多个兄弟组件、跨层级组件或模块间需要解耦时，传统通信方式就显得不够灵活。此时，一个轻量、通用、可独立复用的事件总线就非常必要。

mitt 正是为此而生的。它只有不到百行代码，却提供了完整的事件发布/订阅机制，不依赖任何框架，使用方式也非常简单。下面我将通过样例进行演示。

（1）事件总线是对发布/订阅模式的一种实现，如下图所示。它是一种集中式事件处理机制，允许 Vue.js 应用程序中的不同组件相互通信，无须相互依赖，就可以达到解耦的目的。

（2）在 Vue.js3 中，可以使用事件总线作为组件之间传递数据的桥梁。所有组件都可以共用同一个事件中心，从而向其他任意组件发送或接收事件，实现上下同步通知。不过，事件总线也存在缺点，如果不正确使用它，则可能会导致难以维护。

要使用 mitt 实现事件总线功能，需要在项目根目录执行如下命令进行安装：

npm install mitt --save

（1）为方便使用，首先我们可以封装一个工具 eventbus.js，用于统一导出 emitter 对象，代码如下：

import mitt from "mitt";

// 创建emitter对象
const emitter = mitt();

// 也可以创建多个emitter对象
// const emitter2 = mitt();

export default emitter;

import emitter from './eventbus.js';

（2）下面是发送（或触发）事件的 API ：

emitter.emit('my-event', { name: 'hangge', age: 99 });

（3）下面是监听事件的 API：

emitter.on('my-event', (data) => {
    console.log(data);
});

emitter.on('*', (type, data) => {
    console.log(type, data);
});

（4）如果想要取消 emitter 中所有的监听可以使用如下 API：

emitter.all.clear();

// 监听事件
function onMyEvent(data) {
    console.log(data);
}
// 注册监听器
emitter.on('my-event', onMyEvent);
// 注销监听器
emitter.off('my-event', onMyEvent);