1. 安装mitt

npm install mitt --save
# 或使用yarn
# yarn add mitt

2. 创建mitt实例

在src/utils目录下创建eventBus.js文件：

import mitt from 'mitt'

// 创建mitt实例
export const eventBus = mitt()

// 可以导出常用的方法，方便使用
export default {
  on: eventBus.on,
  emit: eventBus.emit,
  off: eventBus.off
}

3. 在组件中使用

发送事件（触发）

import eventBus from '@/utils/eventBus'

export default {
  methods: {
    sendMessage() {
      // 发送事件，第一个参数是事件名称，第二个参数是要传递的数据
      eventBus.emit('message-sent', { content: 'Hello from Sender!' })
    }
  }
}

接收事件（监听）

import eventBus from '@/utils/eventBus'

export default {
  mounted() {
    // 监听事件
    this.eventHandler = (data) => {
      console.log('Received message:', data.content)
      // 处理接收到的数据
    }
    eventBus.on('message-sent', this.eventHandler)
  },
  beforeUnmount() {
    // 组件卸载时移除事件监听，防止内存泄漏
    eventBus.off('message-sent', this.eventHandler)
  }
}

4. 在Vue3的组合式API中使用

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

export default {
  setup() {
    // 定义事件处理函数
    const handleMessage = (data) => {
      console.log('Received message:', data.content)
    }

    // 生命周期钩子
    onMounted(() => {
      eventBus.on('message-sent', handleMessage)
    })

    onBeforeUnmount(() => {
      eventBus.off('message-sent', handleMessage)
    })
  }
}

mitt的高级特性

移除所有事件监听器：

// 移除所有事件的所有监听器
eventBus.all.clear()

监听所有事件：

eventBus.on('*', (type, e) => {
  console.log(type, e) // type是事件名称，e是事件数据
})