Vue全域性事件匯流排(GlobalEventBus)
阿新 • • 發佈:2022-02-25
在Vue裡我們可以通過全域性事件匯流排來實現任意元件之間通訊,它的原理是給Vue的原型物件上面新增一個屬性,這樣的話我所有元件的都可以訪問到這個屬性,然後可以通過這個屬性來訪問其他元件給這個屬性上面繫結的一些方法從而去傳遞資料,而且這個屬性還可以去訪問Vue例項物件上的方法,因為Vue元件建構函式的原型物件的原型物件是指向Vue的原型物件的(VueComponent.protoType.proto=Vue.protoType),我們每次去建立一個元件,Vue都會去呼叫Vue.extend幫我們創造一個新的VueComponent建構函式,我們只要去使用元件標籤,Vue會在解析的時候幫我們建立元件的例項物件,然後把我們需要的配置傳進去
特別注意:每個元件的VueComponent都是不同的
-
一種元件間通訊的方式,適用於任意元件間通訊。
-
安裝全域性事件匯流排:
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安裝全域性事件匯流排,$bus就是當前應用的vm }, ...... })
-
使用事件匯流排:
-
接收資料:A元件想接收資料,則在A元件中給$bus繫結自定義事件,事件的回撥留在A元件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }
-
提供資料:
this.$bus.$emit('xxxx',資料)
-
-
最好在beforeDestroy鉤子中,用$off去解綁當前元件所用到的事件。