vue中非父子組件之間通信除了使用vuex，也可以通過bus總線，兩者適用場景不同。
bus適合小項目、數據被更少組件使用的項目，對於中大型項目 數據在很多組件之間使用的情況 bus就不太適用了。bus其實就是一個發佈訂閱模式，利用vue的自定義事件機制，在觸發的地方通過$emit向外發佈一個事件,在需要監聽的頁面，通過$on監聽事件。
vuex適用中大型項目、數據在多組件之間公用的情況。
簡單介紹兩者的區別之後，就要介紹下我在一個項目中遇到的一個場景了，這個場景使用bus可能更加適合些：
//main.js Vue.prototype.bus = new Vue(); new Vue({ render: h => h(App) ... }).$mount('#app'); /* *通過把一個vue實例賦於Vue構造函數原型上的一個屬性bus（當然起任何名稱都是可以的） *而每個Vue實例都是有$emit和$on方法的 *由於bus屬性在Vue原型上，根據原型鏈查找規則，在頁面中我們就可以通過 this.bus.$emit 和 *this.bus.$on來進行跨組件通信了 */
//導航欄組件中 //點擊事件發生時發佈一個事件 this.bus.$emit('even-name'，args1, arg2 , ...) //這裡我們可以把點擊導航的相關信息攜帶出去
//路由顯示頁面中 this.bus.$on('event-name', (...args) => { //根據參數來進行路由跳轉 })
這個事件監聽 和 路由跳轉的邏輯我們可以弄成一個mixins進行復用。到這樣就完成了。
但是這樣還是有點麻煩，每個頁面都需要引入mixins，有沒有更好的辦法呢？答案是肯定的。我們項目導航欄是通過路由meta循環出來的，每項有對應導航欄的路由，結構如下：
{ path: '/xxxx', component: xxxx, meta: [ { name: '導航1' }, { name: '導航2', url: '我是導航2的路由' }, { name: '導航3', url: '我是導航3的路由' }, { name: '導航4', } ] },
在思索時我忽然發現每個導航欄的index、導航欄長度length、及router.go方法之間有一個規律，那就是我們可以把index + 1 - length作為router.go的參數，從而不用再關心query參數了，而且只需要在導航欄組件操作一次就可以了，完美！
//導航欄組件點擊事件處理函數中 if (url) { const meta = this.$route.meta; this.$router.go(index + 1 - meta.length) }
知識點補充：
將Bus注入到Vue根對象中
import Vue from 'vue' const Bus = new Vue() var app= new Vue({ el:'#app', data:{ Bus } })
在子組件中通過this.$root.Bus.$on(),this.$root.Bus.$emit()來調用
[madbeef ] vue總線機制(bus)知識點詳解已經有323次圍觀
