Vue组件通信之Event Bus（中央事件总线）

前言

在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>

 为什么发送了数据却不更新 - 组件的问题

因为使用了路由来跳转组件所以导致事件只能在销毁周期里使用时，被传递组件的生命周期才可以接受到数据

传递 destroyed()

接收 create()

扩展bus - 扩展为bus插件