Vue 3 中使用 Mitt 事件总线

Vue3中使用Mitt事件总线实现组件通信。

Mitt是一个轻量级的事件库，可作为全局事件总线替代方案。

文章介绍了基本使用方法：创建事件总线实例、定义事件类型、在组件中发射和监听事件，并强调组件卸载时需取消监听以避免内存泄漏。

还展示了高级用法：工厂模式创建多总线、封装Vue插件、CompositionAPI封装Hook。

最后对比了Mitt与Vue原生通信方式的差异，建议谨慎使用事件总线，优先考虑props/emit或provide/inject等更明确的通信方式。

Vue 3 中使用 Mitt 事件总线

Mitt 是一个轻量级的事件发射/监听库，在 Vue 3 中可以作为全局事件总线的替代方案。

安装

bash 复制代码

npm install mitt
# 或
yarn add mitt
# 或
pnpm add mitt

基本使用

1. 创建事件总线实例

方式一：创建全局事件总线

TypeScript 复制代码

// src/utils/eventBus.ts
import mitt from 'mitt'

type Events = {
  // 定义事件类型
  'user-login': { userId: string; username: string }
  'user-logout': void
  'notification': string
  'update-count': number
  // 使用通配符监听所有事件
  '*': { type: string; payload?: any }
}

const eventBus = mitt<Events>()

export default eventBus

方式二：在 Composition API 中使用

vue

TypeScript 复制代码

<!-- ComponentA.vue -->
<script setup lang="ts">
import { onUnmounted } from 'vue'
import eventBus from '@/utils/eventBus'

// 发射事件
const emitLogin = () => {
  eventBus.emit('user-login', {
    userId: '123',
    username: '张三'
  })
}

// 监听事件
eventBus.on('notification', (message) => {
  console.log('收到通知:', message)
})

// 监听所有事件
eventBus.on('*', (type, payload) => {
  console.log(`事件类型: ${type}`, payload)
})

// 组件卸载时取消监听
onUnmounted(() => {
  eventBus.off('notification')
  // 或者取消所有监听
  // eventBus.all.clear()
})
</script>

2. 在多个组件中使用

vue

TypeScript 复制代码

<!-- Header.vue -->
<script setup lang="ts">
import eventBus from '@/utils/eventBus'

const logout = () => {
  eventBus.emit('user-logout')
}

const sendNotification = () => {
  eventBus.emit('notification', '新消息！')
}
</script>

vue

TypeScript 复制代码

<!-- Sidebar.vue -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import eventBus from '@/utils/eventBus'

const notification = ref('')

const handleNotification = (message: string) => {
  notification.value = message
  setTimeout(() => notification.value = '', 3000)
}

onMounted(() => {
  eventBus.on('notification', handleNotification)
})

onUnmounted(() => {
  eventBus.off('notification', handleNotification)
})
</script>

高级用法

1. 使用工厂模式创建多个事件总线

TypeScript 复制代码

// src/utils/eventBusFactory.ts
import mitt from 'mitt'

export function createEventBus<T>() {
  return mitt<T>()
}

// 创建不同的事件总线
export const uiEventBus = createEventBus<{
  'modal-open': { id: string }
  'modal-close': string
}>()

export const dataEventBus = createEventBus<{
  'data-loaded': any[]
  'data-error': Error
}>()

2. 封装为 Vue 插件

TypeScript 复制代码

// src/plugins/eventBus.ts
import { type App } from 'vue'
import mitt, { type Emitter } from 'mitt'

// 事件类型定义
type Events = {
  [key: string]: any
}

// 创建全局事件总线
const eventBus: Emitter<Events> = mitt<Events>()

export const EventBusPlugin = {
  install(app: App) {
    // 全局属性
    app.config.globalProperties.$eventBus = eventBus
    
    // 提供/注入
    app.provide('eventBus', eventBus)
  }
}

// 在 Composition API 中使用的 Hook
export function useEventBus() {
  const eventBus = inject<Emitter<Events>>('eventBus')
  
  if (!eventBus) {
    throw new Error('Event bus not provided')
  }
  
  return eventBus
}

export default eventBus

main.ts

TypeScript 复制代码

// main.ts
import { createApp } from 'vue'
import { EventBusPlugin } from '@/plugins/eventBus'
import App from './App.vue'

const app = createApp(App)
app.use(EventBusPlugin)
app.mount('#app')

3. 在 Composition API 中封装 Hook

typescript

TypeScript 复制代码

// src/composables/useEventBus.ts
import { onUnmounted } from 'vue'
import eventBus, { type Handler } from '@/utils/eventBus'

export function useEventBus() {
  const listeners: Array<[string, Handler]> = []
  
  const emit = <T = any>(event: string, payload?: T) => {
    eventBus.emit(event, payload)
  }
  
  const on = <T = any>(event: string, handler: (payload: T) => void) => {
    eventBus.on(event, handler as Handler)
    listeners.push([event, handler as Handler])
  }
  
  const off = <T = any>(event: string, handler: (payload: T) => void) => {
    eventBus.off(event, handler as Handler)
    const index = listeners.findIndex(
      ([e, h]) => e === event && h === handler
    )
    if (index > -1) {
      listeners.splice(index, 1)
    }
  }
  
  const once = <T = any>(event: string, handler: (payload: T) => void) => {
    const onceHandler = (payload: T) => {
      handler(payload)
      off(event, onceHandler)
    }
    on(event, onceHandler)
  }
  
  // 自动清理监听器
  onUnmounted(() => {
    listeners.forEach(([event, handler]) => {
      eventBus.off(event, handler)
    })
    listeners.length = 0
  })
  
  return {
    emit,
    on,
    off,
    once
  }
}

vue

TypeScript 复制代码

<!-- 使用封装的 Hook -->
<script setup lang="ts">
import { useEventBus } from '@/composables/useEventBus'

const { emit, on, once } = useEventBus()

// 发送事件
const sendEvent = () => {
  emit('custom-event', { data: 'test' })
}

// 监听事件
on('custom-event', (payload) => {
  console.log('收到事件:', payload)
})

// 只监听一次
once('one-time-event', (payload) => {
  console.log('只会触发一次:', payload)
})
</script>

与 Vue 原生方法的比较

特性	Mitt	Vue 3 的 `emit`/props	Provide/Inject
通信范围	任意组件间	父子组件间	祖先-后代组件间
类型支持	TypeScript 友好	TypeScript 友好	TypeScript 友好
耦合度	低	高	中
适用场景	全局事件、兄弟组件	父子组件	层级深的组件

最佳实践

类型安全

TypeScript 复制代码

// 正确定义事件类型
type Events = {
  'user-updated': User
  'cart-changed': CartItem[]
}

及时清理

TypeScript 复制代码

// 组件卸载时取消监听
onUnmounted(() => {
  eventBus.off('event-name', handler)
})

避免过度使用
- 优先使用 props/emit 进行父子组件通信
- 优先使用 provide/inject 进行层级通信
- 只在需要跨多级/兄弟组件通信时使用事件总线

错误处理

TypeScript 复制代码

const { emit, on } = useEventBus()

on('error-event', (error) => {
  // 统一错误处理
  console.error('事件错误:', error)
})

注意事项

内存泄漏：务必在组件卸载时取消事件监听
调试困难：事件总线可能导致数据流不清晰
替代方案 ：对于复杂应用，考虑使用 Pinia 进行状态管理

Mitt 在 Vue 3 中是一个简单有效的跨组件通信方案，但应谨慎使用，避免滥用导致代码难以维护。