Vue2.x使用EventBus進(jìn)行組件通信，而Vue3.x推薦使用mitt.js。 比起Vue實(shí)例上的EventBus，mitt.js好在哪里呢？首先它足夠小，僅有200bytes，其次支持全部事件的監(jiān)聽和批量移除，它還不依賴Vue實(shí)例，所以可以跨框架使用，React或者Vue，甚至jQuery項(xiàng)目都能使用同一套庫。1. 安裝

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

yarn add mitt

或者通過npm安裝

npm install --save mitt2. 引入到項(xiàng)目并掛載

可以在main.js掛載到全局

// 標(biāo)準(zhǔn)的ES模塊化引入方式import mitt from ’mitt’const app = createApp(App)// vue3.x的全局實(shí)例，要掛載在config.globalProperties上app.config.globalProperties.$EventBus = new mitt()

/common/EventBus.js：也可以封裝一個(gè)ES模塊，對(duì)外暴露一個(gè)Mitt實(shí)例

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

/views/Home.vue：業(yè)務(wù)模塊引入來使用

import EventBus from ’/common/EventBus.js’3. 使用

通過on監(jiān)聽/emit觸發(fā)

/* * App.vue */// setup中沒有this，需要通過getCurrentInstance來獲取Vue實(shí)例import { getCurrentInstance } from ’vue’import { Mp3Player } from ’/common/Mp3Player.js’export default { setup(){ // ctx等同于Vue2.x的this const { ctx } = getCurrentInstance()// 監(jiān)聽-如果有新任務(wù)則播放音效 ctx.$EventBus.on(’newTask’, data => { Mp3Player.play() }) // 也可以通過*監(jiān)聽所有任務(wù) ctx.$EventBus.on(’*’, data => { console.log(’EventBus come in’, data) }) }}/* * Control.vue */// 判斷有新任務(wù)時(shí)，觸發(fā)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進(jìn)行組件通信的步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue3 用mitt進(jìn)行組件通信的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！