父子元件的通訊已經知道了，但是在實際的專案中如果需要拿到兄弟元件上的資料（非父子）那該如何是好呢?

其實Vue已經為我們提供了一套解決方案：使用中央事件匯流排；

 非父子元件間的通訊，使用一個空的Vue例項來作為中央事件匯流排（就相當於中介一樣），用它來丟擲和監聽事件
         1.定義一個空的Vue例項var bus= new Vue()作為中央事件匯流排（bus）；
          2.在傳送資料的元件中使用bus.$emit("事件名",要傳送資料)，來扔出一個事件（連帶著資料，資料可以有多個，用逗號分隔）；
          3.在接收資料的元件中使用bus.$on("事件名"，callback)來監聽扔出來的事件，在callback中可以傳入引數（可以有多個）用來接收資料（一般寫在生命週期mounted階段中）;
          注意：

HTML部分

<div id="container" v-cloak>
        <my-compo></my-compo>
        <your-compo></your-compo>
    </div>
    <!-- 元件一 -->
    <template id="myCompo">
        <div>
            <h3>我有一個{{shoe.color}}的鞋子，價格是{{shoe.size}}元</h3>
            <button @click = "sendData">點擊發送資料</button>//點選執行sendData方法，來向外丟擲一個自定義事件
        </div>
    </template>
    <!-- 元件二 -->
    <template id="yourCompo">
        <div>
            <h3>他開著一輛價值{{car.price}}的{{car.color}}的{{car.brand}}疾馳而去</h3>
            <hr>
            <h2>我是來自兄弟元件my-compo中的資料{{price}}，{{size}}</h2>
        </div>
    </template>
 

JS部分

// 中央事件匯流排；空的vue例項
        var bus = new Vue()
        // Vue例項
        var app = new Vue({
            el:"#container",
            data:{
                person:{
                    weight:120,
                    sex:"男",
                    country:"中國"
                },
                book:"《時間簡史》"
            },
            components:{
                "my-compo":{//元件1
                    template:"#myCompo",
                    data:function(){
                        return {
                            shoe:{
                                color:"紅色",
                                size:43,
                                price:"120"
                            }
                        }
                    },
                    methods:{
                        sendData:function(){
                            bus.$emit("mylla",this.shoe.price,this.shoe.size)//丟擲一個事件，攜帶一些資料
                        }
                    }
                },
                "your-compo":{//元件2，和元件1互為兄弟元件
                    template:"#yourCompo",
                    data:function(){
                        return {
                            car:{
                                brand:"寶馬7系",
                                price:"120萬",
                                color:"黑色"
                            },
                            price:"",
                            size:""
                        }
                    },
                    mounted:function(){//生命週期，當模板編譯完時執行
                        var that = this;//這裡的this代表的時當前元件例項本身
                        bus.$on("mylla",function(data1,data2){//由bus來監聽自定義事件的丟擲，一旦監聽到了就會執行callback函式
                            that.price = data1;
                            that.size = data2
                            //這裡的this指的是bus本身，因為在這裡相當於是事件的監聽，對於事件監聽而言，誰在監聽事件this就代表誰
                        })
                    }
                }
            }
        })