由于Vue3.x中刪除了on 和 off,因此不能借助于一個單獨的Vue實例來實現(xiàn)全局事件的發(fā)布和訂閱與取消訂閱(也就是跨組件通訊)
安裝mitt庫
npm i mitt -S
使用mitt庫
在單獨的文件暴露出事件總線對象
// mitt庫默認導出的是一個函數(shù),我們需要執(zhí)行它從而得到事件總線的對象 /* eventbus.js */ import mitt from 'mitt' const emitter = mitt() export default emitter
在指定組件中導入并使用它
/* one.vue */ // 模板代碼 <button @click="send">sure</button> // 導入事件總線 import emitter from "@/utils/eventbus.js"; // methods代碼 send(){ // 觸發(fā)自定義總線why,并傳入一個對象 emitter.emit("updateList",{name:'bbv',age:22}) }
/* two.vue */ // 導入事件總線 import emitter from "./utils/eventbus.js"; // 注冊updataList事件總線 created(){ emitter.on("updateList",msg=>{ console.log(msg) }) }
取消所有的mitt事件
emitter.all.clear()
取消指定的mitt事件
// 回調(diào)定義在外部,類似于setTimeout function onXxx(){} emitter.on('foo',onXxx) //監(jiān)聽 emitter.off('foo',onXxx) //取消監(jiān)聽
浙公網(wǎng)安備 33010602011771號