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>

然后添加到父組件，這個就很簡單不寫了。

跑起來看效果

【案例源碼】
https://gitee.com/wjw1014/vue_learning_vuex/tree/master/src/components