元件間通訊--利用mitt實現事件匯流排

事務匯流排mitt適用於在任意元件間傳遞資訊。

1、需要安裝mitt外掛

npm i mitt

2、新建一個emitter.ts檔案

//匯入mitt
import mitt from 'mitt'
//建立mitt例項
const emitter = mitt()
//暴露mitt例項
export default emitter

3、使用mitt。

//傳送方
//匯入mitt
import emitter from "@/emitter.ts"
let num = 18
emitter.emit("re",num)

//接收方
//匯入mitt
import emitter from "@/emitter.ts"
import { ref, onUnmounted } from 'vue';
let newNum=ref('')
//接收資料
emitter.on("re",e=>{
    newNum.value = e 
})
//取消訂閱(不取消的話會造成記憶體洩漏)
onUnmounted(() => {
  emitter.off('re');
}