• vue2.x使用EventBus進行元件通訊，而Vue3.x推薦使用mitt.js。
• 比起Vue例項上的EventBus，mitt.js好在哪裡呢？首先它足夠小，僅有20程式設計客棧0bytes，其次支援全部事件的監聽和批量移除，它還不依賴Vue例項，所以可以跨框架使用，React或者Vue，甚至jquery專案都能使用同一套庫。

1. 安裝

推薦使用yarn安裝（用過都知道有多絲滑）

yarn add mitt

或者通過npm安裝

npm install --save mitt

2. 引入到專案並掛載

可以在main.js掛載到全域性

// 標準的ES模組化引入方式
import mitt from 'mitt'

const app = createApp(App)

// vue3.xhttp://www.cppcns.com
 
的全域性例項，要http://www.cppcns.com掛載在config.globalProperties上
app.config.globalProperties.$EventBus = new mitt()

/common/EventBus.js：也可以封裝一個ES模組，對外暴露一個Mitt例項

import mitt from 'mitt'
export default new mitt()

/views/Home.vue：業務模組引入來使用

import EventBus from www.cppcns.com'/common/EventBus.js'

3. 使用

通過on監聽/emit觸發

/*
 * App.vue
 */
// setup中沒有this，需要通過getCurrentInstance來獲取Vue例項
import { getCurrentInstance } from 'vue'
import { Mp3Player } from '/common/Mp3Player.js'

export default {
  setup(){
    // ctx等同於Vue2.x的this
    const { ctx } = getCurrentInstance()
    
    // 監聽-如果有新任務則播放音效
    ctx.$EventBus.on('newTask',data => {
      Mp3Player.play()
    })

    // 也可以通過*監聽所有任務
    ctx.$EventBus.on('*',data => {
      console.log('EventBus
 
程式設計客棧 come in',data)
    })
  }
}


/*
 * Control.vue
 */
// 判斷有新任務時，觸發
ctx.$EventBus.emit('newTask',data)

off移除事件

import {
    onBeforeUnmount,getCurrentInstance
  } from 'vue'

export default {
  setup(){
    const { ctx } = getCurrentInstance()

    onBeforeUnmount(() => {
      // 移除指定事件
      ctx.$EventBus.off('newTask')

      // 移除全部事件
      ctx.$EventBus.all.clear()
    })
  }
}

以上就是Vue3使用mitt進行元件通訊的步驟的詳細內容，更多關於Vue3 用mitt進行元件通訊的資料請關注我們其它相關文章！