一,前言

上一篇介紹了元件通訊的父子元件通訊,在實際開發中元件通訊的場景有很多
根據元件關係可以分為父子元件通訊,兄弟元件通訊和跨級元件通訊
這一篇我們就介紹如何實現兄弟元件通訊和跨級元件通訊
備註:暫時不介紹Vue1.0的通訊方式

二,兄弟和跨級元件通訊原理

先通過插圖直觀瞭解一下元件間的多種關係:

TODO 這裡還需要一張圖 暫時沒找到

父子元件通訊:

子元件使用$emit觸發事件,父元件使用$on監聽子元件的事件

非父子元件(兄弟和跨級元件通訊如何實現通訊):

Vue2.0較Vue1.0這部分有很大不同,
Vue2.0推薦使用一個空的Vue例項充當一個"中介"轉發事件,這個"中介"稱為中央事件匯流排-bus
元件間進行通訊時,在bus中註冊監聽事件,用於接收資料,在元件中觸發事件,用於傳送資料

這種方式非常的巧妙,可以實現任何元件間的通訊,包括父子,兄弟,跨級元件通訊
並且這種方式可以相容Vue1.0和2.0
 

三,通過Bus實現元件通訊

使用中央事件匯流排方式實現元件通訊:

<div id="app">
    接收到的資料: {{ message }}
    <my-component></my-component>
</div>

<script type="text/javascript">

    // 宣告一個空的Vue例項,作為中央事件匯流排,用於轉發訊息
    var bus = new Vue();

    // 元件事件向bus觸發事件
    Vue.component('my-component', {
        template:'<button @click="handleEvent">開始傳送資料</button>'
 
,
        methods:{
            handleEvent: function () {
                bus.$emit('sendData', '通過bus傳遞的資料')
            }
        }
    })

    // 在Vue例項化過程中對對應的bus事件進行監聽
    const vm = new Vue({
        el: '#app',
        data: {
            message:''
        },
        mounted: function () {
            var
 
 _this = this;
            // 例項初始化時(掛載完成),監聽來自bus例項的事假
            bus.$on('sendData', function (msg) {
                _this.message = msg;
            })
        }
    })
</script>

首先聲明瞭一個空的Vue例項bus,充當中央事件匯流排
元件(傳送方)中的事件會通過bus.$emit向bus匯流排中的指定事件傳送訊息
Vue(接收方)初始化時,向Bus匯流排註冊對應事件的監聽,觸發Vue例項資料變化

當元件(傳送方)傳送資料時,會通過bus匯流排觸發一個事件.接收方響應這個事件,完成元件通訊

四,結尾

通過bus匯流排的方式可以實現各種元件的通訊,包括父子,兄弟,跨級組建通訊
宣告的bus匯流排為一個空的Vue例項,當然也可以為它新增data,methods和computed等選項
通過bus匯流排儲存一些公用資料,在應用初始化時儲存起來,使用時直接獲取

除了通過bus中央事件匯流排方式實現在元件間通訊外,還可以使用父鏈和子元件索引來實現
下一篇介紹父鏈和子元件索引實現元件通訊