Vue核心技術-19,兄弟元件通訊和跨級元件通訊
阿新 • • 發佈:2019-01-26
一,前言
上一篇介紹了元件通訊的父子元件通訊,在實際開發中元件通訊的場景有很多
根據元件關係可以分為父子元件通訊,兄弟元件通訊和跨級元件通訊
這一篇我們就介紹如何實現兄弟元件通訊和跨級元件通訊
備註:暫時不介紹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中央事件匯流排方式實現在元件間通訊外,還可以使用父鏈和子元件索引來實現
下一篇介紹父鏈和子元件索引實現元件通訊