vue官網指出，可以使用一個空vue實例作為事件中央線！

也就是說 非父子組件之間的通信，必須要有公共的實例（可以是空的），才能使用$emit獲取$on的數據參數，實現組件通信

這里舉個例子來說明一下。

公共實例文件bus.js，作為公共數控中央總線

import Vue from "vue";

export defaultnewVue();

第一個組件 first.vue

import Bus from '../bus.js';

export default {

? name: 'first',

? data () {

? ? return {

? ? ? value: '我來自first.vue組件！'? ? }

? },

? methods:{

? ? add(){// 定義add方法，并將msg通過txt傳給second組件Bus.$emit('txt',this.value);? ? }

? }

}

第二個組件second.vue

import Bus from '../bus.js';

export default {

? name: 'second',

? data () {

? ? return {? ? }

? },

? mounted:function(){? ? Bus.$on('txt',function(val){//監聽first組件的txt事件? ? ? console.log(val);

? ? });

? }

}

這樣，就可以在第二個非父子關系的組件中，通過第三者bus.js來獲取到第一個組件的value。

兄弟組件之間與父子組件之間的數據交互，兩者相比較，兄弟組件之間的通信其實和子組件向父組件傳值有些類似，其實他們的通信原理都是相同的，

例如子向父傳值也是$emit和$on的形式，只是沒有eventBus，但若我們仔細想想，此時父組件其實就充當了bus這個事件總線的角色。

這種用一個Vue實例來作為中央事件總線來管理組件通信的方法只適用于通信需求簡單一點的項目，對于更復雜的情況，Vue也有提供更復雜的狀態管理模式Vuex來進行處理，請自行到官網進行學習。