1. 安裝mitt

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

2. 創(chuàng)建mitt實(shí)例

在src/utils目錄下創(chuàng)建eventBus.js文件：

import mitt from 'mitt'

// 創(chuàng)建mitt實(shí)例
export const eventBus = mitt()

// 可以導(dǎo)出常用的方法，方便使用
export default {
  on: eventBus.on,
  emit: eventBus.emit,
  off: eventBus.off
}

3. 在組件中使用

發(fā)送事件（觸發(fā)）

import eventBus from '@/utils/eventBus'

export default {
  methods: {
    sendMessage() {
      // 發(fā)送事件，第一個(gè)參數(shù)是事件名稱，第二個(gè)參數(shù)是要傳遞的數(shù)據(jù)
      eventBus.emit('message-sent', { content: 'Hello from Sender!' })
    }
  }
}

接收事件（監(jiān)聽）

import eventBus from '@/utils/eventBus'

export default {
  mounted() {
    // 監(jiān)聽事件
    this.eventHandler = (data) => {
      console.log('Received message:', data.content)
      // 處理接收到的數(shù)據(jù)
    }
    eventBus.on('message-sent', this.eventHandler)
  },
  beforeUnmount() {
    // 組件卸載時(shí)移除事件監(jiān)聽，防止內(nèi)存泄漏
    eventBus.off('message-sent', this.eventHandler)
  }
}

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

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

export default {
  setup() {
    // 定義事件處理函數(shù)
    const handleMessage = (data) => {
      console.log('Received message:', data.content)
    }

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

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

mitt的高級(jí)特性

移除所有事件監(jiān)聽器：

// 移除所有事件的所有監(jiān)聽器
eventBus.all.clear()

監(jiān)聽所有事件：

eventBus.on('*', (type, e) => {
  console.log(type, e) // type是事件名稱，e是事件數(shù)據(jù)
})