Vue的全局事件总线（GlobalEventBus）

一、定义

一种组件间的通信方式，适用于任意组件间的通信

二、安装全局事件总线

new Vue({

    el: '#app',

    render: h => h(App),

    beforeCreate() {

        Vue.prototype.$bus=this // 安装全局事件总线，$bus就是当前应用的vm

    }

})

三、使用事件总线

1. 接收数据

A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
    demo(data){......}    //提前配置好 demo 函数
}
......
mounted(){
    this.$bus.$on('xxx',this.demo)   //绑定自定事件时，回调要么配置在 methods中，要么用箭头函数，否则 this 指向会出问题

    this.$bus.$on('xxx',(data)=>{  console.log('收到的数据:'+data)  })   //箭头函数的写法

2. 提供数据

B组件把数据传给A组件，this.$bus.$emit('xxxx',数据)

 sendStudentName(){

        this.$bus.$emit('xxx',this.name)   //将数据传给A组件

      }

备注：此处的xxx是自定义事件的名称

 

四、 销毁自定义事件

在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

beforeDestroy() { this.$bus.$off('nihao') },