目錄

1、新建mitt.js檔案

2、訊息源 元件

3、目標 元件

4、測試結果

1、新建mitt.js檔案

在vue3工程中新建一個mitt.js檔案，我的mitt.js檔案放在utils資料夾下

mitt.js檔案的內容如下：

import mitt from 'mitt'
export default new mitt()

這是Vue3的寫法，網上Vue2的寫法比較多，可以自行搜尋。

2、訊息源 元件

你要在哪個元件把訊息傳送出去，我這裡是將傳送功能放在一個按鈕裡，點選按鈕就會將資料傳送出去。接收方是依據事件名來接收資料的，如果傳送方和接收放的事件名不一致，對方就無法接收到。

onBtnClicked(){
  let data = "hello"
  mitt.emit('mymsg',data);       //mymsg是事件名，data是要傳送的資料
}

3、目標 元件

這裡我選擇在mounted()中接收資料

mitt.on('mymsg',(data)=>{
    console.log("接收到的內容是："+ data);
});

4、測試結果

最後的測試結果如下：

這裡有個bug就是mounted()會被重複呼叫，使用setup()也是如此，如果有知道解決方案的大佬，希望能在評論區指點一下。