Vue.js---全局事件总线

        全局事件总线是解决组件间传递数据的一个好方法，与使用 props 传参、自定义事件传参的方法相比，全局事件不需要通过两组件的中间组件传递数据，可以直接一步到位实现任意两组件间的数据传递。

实现原理：

        原理还是通过一个中间件进行传递，不同的是这个中间件可以直接访问到所有的组件实例对象，不需要通过层级关系。这里需要用到一个重要的内置关系，即：

VueComponent.prototype.__proto__ === Vue.prototype

        即 VueCompnent 的原型对象的原型 与 Vue 的原型对象指向同一个对象，所以 VueComponent 的实例对象可以访问到 Vue 原型上的属性和方法。

        所以可以想到可以利用 Vue 的实例化对象作为这个中间件。

new Vue({
    el: '#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this; // bus 总线
    }
})

         我们可以在 Vue 实例将要创建的时候在 Vue 的原型上添加该实例对象本身，取名 $bus （总线）。这样一来，所有 VueComponent 实例对象都可以通过原型链访问到总线，从而可以进行数据传递。

具体做法：

        首先在需要接收数据的组件上给总线绑定自定义事件，再在需要传递数据的组件上触发总线上的该自定义事件。注意绑定事件时若不在 methods 中编写函数，需要将函数体写成箭头函数，否则 this 的指向会出问题。

// 给总线绑定事件 在接收数据的组件上编写
this.$bus.$on('baci',(data)=>{
    console.log('get',data);
})

//触发总线的事件 在传递数据的组件上编写
sendname(){
    this.$bus.$emit('baci',this.name);
}

        最好在销毁某组件时，将其绑定在总线上的自定义事件同时销毁。

在接收数据的组件上编写
beforeDestroy(){
    this.$bus.$off('baci');
}

 欢迎指正！