Vue與VueComponent的關系圖
Vue全局事件總線
- 全局事件總線是一種組件間通信的方式，適用於任意組件間通信。
- 相當於給每個組件做個代理，作為數據通信的中轉站。
- 其本質是Vue的實例對象，通過
$emit、$on、$off發布、監聽、關閉事件。 - 所以就需要每個子組件都能訪問的到（每個子組件實例上都要有$bus），因此一般放在Vue的原型對象上
第一種常見的定義方法
// main.js
import Vue from 'vue'
import App from './App.vue'
// 將$bus掛載在Vue原型上，當然也可掛載到Window上，不太建議
Vue.prototype.$bus = new Vue()
new Vue({
render: h => h(App)
}).$mount('#app')
這樣就可以在組件中使用this.$bus.$emit發送事件，需要接受數據的組件用this.$bus.$on監聽，當然不要忘了在beforeDestory鈎子函數中，用this.$bus.$off解綁當前事件。
$off解綁單個事件this.$bus.$off('aaa')，多個可以用數組this.$bus.$off(['aaa', 'bbb'])，詳情查看官方文檔
上面這種方法比較常見，但是有一個小問題，就是這里的Vue被new了兩次，實際上是可以優化的。
優化后的代碼如下
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
beforeCreate () {
// 安裝全局事件總線，$bus就是當前應用的vm
Vue.prototype.$bus = this
}
}).$mount('#app')
利用beforeCreate鈎子函數掛載$bus，這是比較好的寫法
消息訂閱與發布（PubSub）
- 一種組件間的通訊方式，適用於任意組件通訊（與上面的事件總線類似，了解即可）
使用步驟
- 安裝PubSub:
npm i pubsub-js - 引入：
import PubSub from 'pubsub-js' - 接收數據：A組件想接收數據，則在A組件中訂閱消息
methods: {
demo(msg, data) { ...... }
}
......
mounted() {
this.pid = PubSub.subscribe('xxx', this.demo) // 訂閱消息
}
- 提供數據：
PubSub.pubilsh('xxx', data) - 在
beforeDestory鈎子函數中用PubSub.unsubscribe('xxx')取消訂閱