Vue3使用mitt進行組件通信的步驟

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

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

yarn add mitt

或者通過npm安裝

npm install --save mitt2. 引入到項目并掛載

可以在main.js掛載到全局

// 標準的ES模塊化引入方式import mitt from ’mitt’const app = createApp(App)// vue3.x的全局實例，要掛載在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 ’/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進行組件通信的資料請關注好吧啦網其它相關文章！