詳解Vue 非父子組件通信方法（非Vuex）

假設 bb 組件里面有個按鈕，點擊按鈕，把 123 傳遞給 aa 組件

// 根組件（this.$root)
new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  // 空的實例放到根組件下，所有的子組件都能調用
  Bus: new Vue()
 }
})

bb 組件內調用事件觸發↓

<button @click="submit">提交<button>
 
methods: {
  submit() {
   // 事件名字自定義，用不同的名字區別事件
   this.$root.Bus.$emit('eventName', 123)
  }
 }

aa 組件內調用事件接收↓

// 當前實例創建完成就監聽這個事件
created(){
 this.$root.Bus.$on('eventName', value => {
  this.print(value)
 })
},
 
methods: {
 print(value) {
  console.log(value)
 }
},
 
// 在組件銷毀時別忘了解除事件綁定
beforeDestroy() {
  this.$root.Bus.$off('eventName')
},

這樣就可以了，是不是很簡單？

問題一：如果有多個組件組件需要通信，是不是要在根組件上多建幾個 Bus？
答：不需要的，只要保證事件名 （eventName）不一樣就行了。

問題二：為什么要弄個 Bus？直接 this.$root.$on、this.$root.$emit 不更簡單粗暴？

答：按照文檔上的說法是專門用一個空的 Vue 實例（Bus）來做中央事件總線更加清晰也易於管理。