快捷導(dǎo)航

Vue3中事件總線mitt的使用方式

更新時(shí)間：2025年03月23日 13:51:49 作者：又藍(lán)

mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細(xì)介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

我的使用場景

在項(xiàng)目中遇到一個(gè)這樣的問題。頁面使用了keepalive緩存，員工排班和班次之間的數(shù)據(jù)有關(guān)聯(lián)，當(dāng)我刪除一個(gè)班次后，給員工排的班，屬于那個(gè)被刪的班次的情況，已經(jīng)生效的不會(huì)受影響，但是未生效的排班會(huì)被刪除。如果我不重新拉取后端數(shù)據(jù)的話，我從班次頁面切換到員工排班頁面，我前端的排班還是存在的，但是后端的數(shù)據(jù)已經(jīng)刪除了。這個(gè)時(shí)候用戶點(diǎn)擊刪除排班，就會(huì)出現(xiàn)不友好的提示，我需要避免這個(gè)情況。這就需要再刪除班次的時(shí)候，重新拉取員工排班列表的數(shù)據(jù)了。

使用方法

安裝mitt

npm install mitt

創(chuàng)建一個(gè)事件總線

在你的項(xiàng)目中創(chuàng)建一個(gè)事件總線，可以將其放在一個(gè)單獨(dú)的文件中，例如 eventBus.js

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

在員工排班中監(jiān)聽事件

監(jiān)聽來自事件總線的事件，然后調(diào)用相應(yīng)的方法，記得要在頁面銷毀的時(shí)候，取消監(jiān)聽。

// schedule.vue
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { eventBus } from '@/path/to/eventBus';		// 這個(gè)路徑需要對(duì)應(yīng)上

export default {
  setup() {
    const search = () => {
      // 在這里執(zhí)行方法
      console.log('方法被調(diào)用');
    };

    onMounted(() => {
      eventBus.on('getScheduleSearch', search);
    });

    // 在頁面被銷毀的時(shí)候，取消監(jiān)聽
    onBeforeUnmount(() => {
      eventBus.off('getScheduleSearch', search);
    });

    return {};
  },
};

在班次頁面中觸發(fā)事件

觸發(fā)事件，通知員工排班頁面執(zhí)行方法。

// shift.vue
import { ref } from 'vue';
import { eventBus } from '@/path/to/eventBus';		// 這個(gè)路徑需要對(duì)應(yīng)上

export default {
  setup() {
  	// 假設(shè)這是我刪除班次的方法
    const deleteShift = () => {
      // 在這里觸發(fā)事件，通知員工排班頁面執(zhí)行方法。
      eventBus.emit('getScheduleSearch');
    };

    return { getScheduleSearch };
  },
};

這樣，你就可以在班次頁面中調(diào)用 deleteShift 方法時(shí)，員工排班頁面中的 search 方法就會(huì)被觸發(fā)。這是一種基于事件的簡單而靈活的通信方式，適用于不同組件之間的解耦。

延展：vue3 mitt進(jìn)行兄弟組件通信

mitt又稱事務(wù)總線，是第三方插件。

Vue2.x 使用 EventBus 進(jìn)行組件通信，而 Vue3.x 推薦使用 mitt.js。

優(yōu)點(diǎn)

首先它足夠小，僅有200bytes，其次支持全部事件的監(jiān)聽和批量移除，它還不依賴 Vue 實(shí)例，所以可以跨框架使用，React 或者 Vue，甚至 jQuery 項(xiàng)目都能使用同一套庫。

下載

npm install --save mitt

引入

方式1：main.js全局總線

import { createApp } from 'vue';

import App from './App.vue';

import mitt from "mitt"

const app = createApp(App)

app.config.globalProperties.$mybus = mitt()

方式2：單獨(dú)定義mybus.js文件，想用的時(shí)候再導(dǎo)入

//mybus.js文件
import mitt from 'mitt'
const emitter = mitt();
export default emitter ;

方式3：直接在組件導(dǎo)入

import mitt from 'mitt'

setup(){
 　　const emitter = mitt();
　　 return{
　　　　emitter
　　}
}

使用

//使用
import emitter from '@/utils/mybus.js';
//發(fā)送
emitter.emit('getDetail',{name:'張三',age:20});
//監(jiān)聽
emitter.on("getDetail",(val) = >{
　　console.log(val)
})
//取消監(jiān)聽
emitter.off("getDetail")
//如果發(fā)送了多個(gè)，可監(jiān)聽全部
emitter.on("*",(type,val) = >{
   console.log(type,val)   //type就是類型 之前注冊(cè)的getDetail
})
//取消所有監(jiān)聽
emitter.all.clear();

核心原理

Vue3.x以后從實(shí)例中移除了 $on，$off 和 $once 方法，$emit 仍然是現(xiàn)有 API 的一部分，只能實(shí)現(xiàn)子組件觸發(fā)父組件的方法。

原理很簡單，就是通過 map 的方法保存函數(shù)。

export default function mitt(all) {
 all = all || new Map();
 
 return {
  all,
 
  on(type, handler) {
   const handlers = all.get(type);
   const added = handlers && handlers.push(handler);
   if (!added) {
    all.set(type, [handler]);
   }
  },
 
  off(type, handler) {
   const handlers = all.get(type);
   if (handlers) {
    handlers.splice(handlers.indexOf(handler) >>> 0, 1);
   }
  },
 
  emit(type, evt) {
   ((all.get(type) || [])).slice().map((handler) => { handler(evt); });
   ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
  }
 };
}

到此這篇關(guān)于Vue3中事件總線mitt的使用方式的文章就介紹到這了,更多相關(guān)Vue3 事件總線mitt內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: