vue3兄弟組件通訊(mitt)

由於Vue3.x中刪除了on 和 off，因此不能借助於一個單獨的Vue實例來實現全局事件的發布和訂閱與取消訂閱（也就是跨組件通訊）

安裝mitt庫

npm i mitt -S

使用mitt庫

在單獨的文件暴露出事件總線對象

// mitt庫默認導出的是一個函數，我們需要執行它從而得到事件總線的對象
/* 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(){
    // 觸發自定義總線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事件

// 回調定義在外部，類似於setTimeout
function onXxx(){}
emitter.on('foo',onXxx) //監聽
emitter.off('foo',onXxx) //取消監聽