全局事件總線(globalEventBus)

在Vue里我們可以通過全局事件總線來實現任意組件之間通信,它的原理是給Vue的原型對象上面添加一個屬性,這樣的話我所有組件的都可以訪問到這個屬性,然后可以通過這個屬性來訪問其他組件給這個屬性上面綁定的一些方法從而去傳遞數據,而且這個屬性還可以去訪問Vue實例對象上的方法,因為Vue組件構造函數的原型對象的原型對象是指向Vue的原型對象的(VueComponent.protoType.proto=Vue.protoType),我們每次去創建一個組件,Vue都會去調用Vue.extend幫我們創造一個新的VueComponent構造函數,我們只要去使用組件標簽,Vue會在解析的時候幫我們創建組件的實例對象,然后把我們需要的配置傳進去

特別注意:每個組件的VueComponent都是不同的

配置全局事件總線

new Vue({
    ... ...
    beforeCreate() {
    Vue.protoType.$bus = this //$bus名字可以隨便寫,但是標准寫法$bus,為了違和Vue的設計,這里的this是指向Vue的實例對象,因為在beforeCreate里Vue才只是剛開始初始化數據,但是這里的this已經是指向Vue的實例對象了    
   }
    ... ...
})

使用:

1.接收數據,A組件想接收B組件的數據,A組件需要現在自身里給$bus綁定自定義事件,然后B組件再去通過$emit觸發$bus上的自定義事件,再去給里面傳遞參數,這樣A組件就可以接收到數據

// A組件
methods:{
    demo(demo) { //demo就是B組件傳遞過來的數據
        ... ...
   }
        
},
​
mounted() {
    this.$bus.on('xxx',this.demo) //給A組件綁定自定義事件
}   

// B組件
​
this.$bus.$emit('xxx',數據)

建議:最好在beforeDestroy鈎子中,通過this.$bus.$off('xxx')解綁自定義事件