Vue 中 Mitt 事件总线的完整教程

原创于 2025-09-24 08:20:19 发布 · 1.8k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #vue.js #mitt

前端专栏收录该内容

122 篇文章

订阅专栏

一、Mitt 简介

Mitt 是一个轻量级的 JavaScript 发布-订阅模式库，专为前端开发中的组件通信而设计。在 Vue 3 中，官方已经移除了内置的 EventBus 功能，转而推荐使用 Mitt 这样的专业发布订阅库。

核心优势

极简设计：代码仅约 200 字节，无第三方依赖，API 极其简单（仅包含 on、off、emit 和 all.clear 四个方法）
高性能与灵活性：支持任意事件类型和参数传递，适用于浏览器、Node.js 等任意 JavaScript 环境
内存管理友好：需要手动管理订阅生命周期，有助于避免内存泄漏

二、安装与基础配置

安装

npm install mitt
# 或
yarn add mitt

基础使用方式

方式一：创建独立事件总线实例（推荐）

// 在工具文件中创建，如 src/utils/eventBus.js
import mitt from 'mitt';

const emitter = mitt();
export default emitter;

方式二：全局挂载（Vue 3 项目）

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';

const app = createApp(App);
// 配置为全局属性
app.config.globalProperties.$mittBus = mitt();

app.mount('#app');

三、基础使用方法

1. 导入事件总线

// 方式一：导入独立实例
import emitter from '@/utils/eventBus';

// 方式二：使用全局实例（Vue 3）
const { proxy } = getCurrentInstance();
const bus = proxy.$mittBus;

2. 订阅事件

// 定义事件处理函数
const handler = (data) => {
  console.log('收到数据:', data);
};

// 订阅事件
emitter.on('event-name', handler);

// Vue 3 组合式 API 中使用
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(() => {
  emitter.on('event-name', handler);
});

onBeforeUnmount(() => {
  emitter.off('event-name', handler);
});

3. 发布事件

// 发布事件并传递数据
emitter.emit('event-name', { key: 'value' });

4. 取消订阅

// 取消特定事件的特定处理函数
emitter.off('event-name', handler);

// 取消特定事件的所有处理函数
emitter.off('event-name');

// 清空所有事件监听
emitter.all.clear();

四、Vue 3 中的实战应用

1. 兄弟组件通信示例

父组件（容器组件）

<template>
  <div class="container">
    <ComponentA />
    <ComponentB />
  </div>
</template>

<script setup>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
</script>

ComponentA.vue（发送事件）

<template>
  <div>
    <button @click="sendMessage">发送消息给ComponentB</button>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import emitter from '@/utils/eventBus';

const { proxy } = getCurrentInstance();

const sendMessage = () => {
  // 发送事件并传递数据
  emitter.emit('message-from-a', { 
    text: 'Hello from Component A!', 
    timestamp: Date.now() 
  });
};
</script>

ComponentB.vue（接收事件）

<template>
  <div>
    <h3>接收到的消息：</h3>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import emitter from '@/utils/eventBus';

const message = ref('');

// 事件处理函数
const handleMessage = (data) => {
  message.value = `${data.text} (接收时间: ${new Date(data.timestamp).toLocaleString()})`;
};

onMounted(() => {
  // 订阅事件
  emitter.on('message-from-a', handleMessage);
});

onBeforeUnmount(() => {
  // 组件销毁时取消订阅，避免内存泄漏
  emitter.off('message-from-a', handleMessage);
});
</script>

2. 全局事件总线配置（Vue 3）

main.ts 配置

import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';

const app = createApp(App);

// 创建并配置全局事件总线
const mittBus = mitt();
app.config.globalProperties.$mittBus = mittBus;

app.mount('#app');

组件中使用全局事件总线

<template>
  <div>
    <button @click="sendGlobalEvent">发送全局事件</button>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, onBeforeUnmount } from 'vue';

const { proxy } = getCurrentInstance();
const bus = proxy.$mittBus;

const sendGlobalEvent = () => {
  bus.emit('global-event', { message: '这是全局事件' });
};

// 订阅全局事件
onMounted(() => {
  bus.on('global-event', (data) => {
    console.log('收到全局事件:', data);
  });
});

// 取消订阅
onBeforeUnmount(() => {
  bus.off('global-event');
});
</script>

五、TypeScript 支持

Mitt 支持 TypeScript，可以为事件定义类型，提高代码的类型安全性。

1. 定义事件类型

// types/events.ts
export type Events = {
  'user-login': { id: number; name: string; email: string };
  'user-logout': null;
  'cart-update': { items: Array<{ id: number; name: string; quantity: number }> };
  'notification': { type: 'success' | 'error' | 'warning'; message: string };
};

2. 创建类型化的事件总线

// utils/eventBus.ts
import mitt from 'mitt';
import type { Events } from '@/types/events';

const emitter = mitt<Events>();

export default emitter;

3. 使用类型化的事件总线

import emitter from '@/utils/eventBus';

// 发送事件 - 类型安全
emitter.emit('user-login', { 
  id: 1, 
  name: 'John Doe', 
  email: 'john@example.com' 
});

// 接收事件 - 类型安全
emitter.on('user-login', (userData) => {
  console.log(`用户 ${userData.name} 已登录`);
  // userData 自动推断为 { id: number; name: string; email: string }
});

// 错误的事件类型会在编译时报错
// emitter.emit('user-login', { wrong: 'data' }); // 错误！

六、最佳实践

1. 事件命名规范

使用 kebab-case 命名事件（如 user-login、cart-updated）
采用 语义化命名，清晰表达事件含义
使用 命名空间 避免冲突（如 module:action 格式：user:login、cart:update）

2. 生命周期管理

一定要在组件销毁时取消事件订阅
使用 onMounted 和 onBeforeUnmount（组合式 API）或 created 和 beforeDestroy（选项式 API）管理订阅

import { onMounted, onBeforeUnmount } from 'vue';
import emitter from '@/utils/eventBus';

onMounted(() => {
  emitter.on('event-name', handler);
});

onBeforeUnmount(() => {
  emitter.off('event-name', handler);
});