前言

在Vue元件中常用的元件通訊是父子元件通訊，但隨著業務元件越來越多各元件之間的通訊模式就不會僅僅侷限於父子這種方式，還會有兄弟元件，爺孫元件，跨層元件等等複雜的場景。所以我們需要一種能方便滿足各種複雜場景下的元件通訊的方法。

Event Bus（中央事件匯流排）

上述的場景下我們就可以使用bus來作為元件間通訊的一種輕量的實現方式。

bus的原理就是釋出訂閱模式，比如你需要租一個房子，你可能會找房產中介來登記你的資訊，訂閱你找房需求相關的質詢，一旦有符合你的房子出現時，中介會通知你，並傳達你房子的具體資訊。在例子中你和出租者就是兩個跨級的元件，bus就是通訊的橋樑，這個橋樑是任何場景下都可以暢通的。

引入使用

全域性註冊bus事件

// 在main.js檔案中

import Vue from "vue"
const bus = new Vue();
export default bus;
Vue.prototype.bus = bus

傳遞-接受模式

// A元件 - 傳遞者
// 由於路由跳轉元件的元件生命週期導致傳遞事件只能在銷燬週期裡使用，下一個元件就可以正常接受

export default {
  name: 'HelloWorld',
  data(){
    return{}
  },
  methods:{
  },
  destroyed(){
      this.bus.$emit('houseInfo',{
        name:
 
"Ricemonster",
        message:"這裡有情況，速來",
      })
  }
}

// B元件 - 接收者
<script>
export default {
    data(){
        return{
            message: "現在還沒有收到使用者資訊"
        }
    },
    created(){
        this.bus.$on("houseInfo",res=>{
            this.message = res
        })
    }
}
</script>

為什麼傳送了資料卻不更新 - 元件的問題

擴充套件bus - 擴充套件為bus外掛