Vue兄弟元件之間通訊 eventBus

今天碰到了這個問題，兩個毫無關聯的元件之間需要通訊，怎麼辦！使用 props 一層一層的傳肯定是有問題的，當然可以實現，在一個就是Vuex，定義一個公共變數也是可以的，但是相對來說比較好的實現方式就是 eventBus 了吧。

其實我覺得我現在的狀態就特別好，有個志同道合的人，無論在生活還是工作上遇到問題都可以敞開了探討，沒有避諱，不管最後能不能解決，都是一種收穫！

使用

一、使用 eventBus 首先我們建立一個 bus.js 檔案，裡面的內容如下：

import Vue from 'vue';  
export default new Vue(); 
 

沒有看錯，就兩行，夠了！

二、在需要使用 eventBus 的元件中引入上面建立的 bus.js 檔案。

import Bus from 'common/js/bus.js';   // 這個檔案路徑寫自己的

三、釋出Bus訊息的元件

Bus.$emit('getTarget', event.target);   

四、接收Bus訊息的元件

Bus.$on('getTarget', target => {  
    console.log(target);  
}); 

注意哈，這個其實就是釋出訂閱的關係，接收訊息的這一段也就是第四條，他要在頁面一加載出來就訂閱，不然發的訊息可能接收不到，一般寫在 created 或者是 mounted 鉤子裡面。

使用案例

兩個元件，dome01 和 demo02 ，兩個元件從 dome01 傳送訊息給 demo02，dome02 收到 dome01 傳送的訊息後展示到自己的介面上去！不使用 props 和 Vuex ，就使用 eventBus 實現。

首先建立 bus.js 檔案

import Vue from 'vue';  
export default new Vue(); 

編寫 dome01 元件

<template>
    <div>
        <h2>這是demo01元件</h2>
        <button @click="add"> 點擊向dome02元件傳送訊息 </button>
    </div>
</template>

<script>

import Bus from '../utils/bus'

export default {
    methods:{
        // 點選按鈕傳送Bus訊息
        add(){
            // 傳送 myMsg 主題 的Bus訊息
            Bus.$emit('myMsg', "你好啊，我叫王佳偉");
            // 列印一下日誌
            console.log("dome01元件傳送完訊息：bus事件觸發了")
        }
    }
}
</script>
 

編寫 dome02 元件

<template>
  <div>
    <h2>這是dome02元件</h2>
    <h3>這個地方展示dome01元件的命令</h3>
    <!-- 把 dome01 發過來的訊息渲染到下面 -->
    <span>{{msg}}</span>
  </div>
</template>

<script>

// 引入bus.js檔案
import Bus from '../utils/bus'

export default {
  data() {
    return {
      msg: "wjw"
    };
  },
  // 在mounted鉤子裡面就開始定閱myMsg主題的訊息
  mounted() {
      Bus.$on('myMsg', myMsg => {  
            console.log("dome02元件收到bus訊息：",myMsg);  
            this.msg = myMsg
        });  
  }
};
</script>

然後新增到父元件，這個就很簡單不寫了。

跑起來看效果