全局事件总线

 作用：可以在全局层面上，在任意组件之间相互传递数据。不再局限于父子组件传值，或多层嵌套传值等方式。

使用方式：完全与父子组件传值一致，使用 $on 监听事件，使用 $emit 触发事件，使用 $off 解绑事件。

理解

 1、事件总线相当于是独立于所有组件之外的旁观者，不参与组件内的任何逻辑，只负责调用 Vue 实例对象上的方法，且所有组件都能访问到它

2、既然所有组件都能使用事件总线，那我们可以将其定义在两个地方

window：直接挂载到 window 全局对象上( 但是会导致污染window 全局对象，可能造成属性混乱 )，且通过 window.x 不能访问到 Vue 实例对象上的 $on 等方法。直接排除

window.x = {a:1,b:2}

Vue 原型对象：挂载到 Vue.prototype 上，组件实例对象 和 Vue实例对象都能访问到该属性。

Vue.prototype.x = { a: 1, b: 2 };

3、在 Vue 原型对象，以及 组件实例对象上都是不存在这个东西的，但是我们又需要使用 Vue 实例对象上的 $on、$emit、$off 等方法，所以这玩意应该继承了 Vue 原型对象，或者 组件实例对象

4、继承 组件实例对象 ，或 Vue 原型对象 ( 在 main.js 中挂载 )

继承  VueComponent组件实例对象

// 通过 Vue.extend({}) 返回 VueComponent 构造函数
const Demo = Vue.extend({})// 通过 new Demo() 得到 VueComponent 构造函数 的实例对象
const d = new Demo()// 将 VueComponent 构造函数 的实例对象 挂载到 Vue.prototype 实例对象上
Vue.prototype.x = d;

 继承 Vue 实例对象：

// 如果这样写，那肯定是错误的，因为 new Vue() 已经完成，且挂载了，这个时候再去向 Vue.prototype 添加属性会报错
const vm = new Vue({render: (h) => h(App),
}).$mount("#app");Vue.prototype.x = vm;

 使用 beforeCreate 生命周期钩子函数，在 Vue 实例创建之前，向  Vue.prototype 中添加属性。

new Vue({render: (h) => h(App),beforeCreate() {// 当前 this 就是 new Vue() 实例，这是 Vue 底层设计，在生命周期钩子函数中，this都是指向当前 Vue实例对象 或 组件实例对象Vue.prototype.x = this}
}).$mount("#app");

 继承 组件实例对象 ，或 Vue 原型对象 都可以使的 事件总线对象访问到 $on、$emit 等Vue 底层的方法。但是看写法来说，肯定是使用  beforeCreate 生命周期钩子函数好啊

用法

因为 上面已经 通过 beforeCreate 生命周期钩子函数 使得 事件总线对象 继承了 底层方法，所以下面可以直接使用

定义 School 子组件。在 mounted 钩子函数中，注册了 hello 事件，且进行监听

<template><div class="demo"><p>School子组件</p></div>
</template><script>
export default {mounted() {this.x.$on('hello', (data) => {console.log('我接受到了数据',data)})},
};
</script>

定义  Student 子组件。点击 test 之后 触发 hello 事件，传递数据给 School 子组件

<template><div class="demo"><p @click="test">Student子组件</p></div>
</template><script>
export default {methods: {test() {this.x.$emit('hello','123')},  },
};
</script>

定义App 组件，

<template><div id="app"><School/><Student /></div>
</template>

两个兄弟组件之间没有任何关联，但是现在需要 School 子组件 获取到 Student 子组件 传递的数据，这个时候，我们的事件总线就起到作用了。

点击 test 事件，触发 hello 事件，且传递数据。此时控制台上打印出了 Student 传递出的数据。

这个 this.x 只是我随便定义的一个属性，不是固定名称，建议使用 $bus ，类似于 Vue 底层的 $on、$emit 等方法。 

第二种方法：需要新建文件，且使用时每次需要引入文件，较麻烦。只不过一个是在原型上增加属性，一个是直接使用全新的 Vue 实例对象

新建 js 文件：直接暴露 Vue 实例对象

//bus.js
import Vue from 'vue';
export default new Vue();

 引入文件：相当于引入了一个 全新的 Vue 实例对象

import Bus from '@/module/util/bus';

使用：和父子组件传值一样，$on 监听事件 $emit 触发事件

// 监听事件
Bus.$on('getLevelList', data => {this.levelList = data;
});// 触发事件
Bus.$emit('getLevelList', res.data);

建议

如果组件被销毁，建议解绑该组件上的事件，因为事件总线上 监听的事件不会随着组件的销毁而自动解绑，这样可能会造成 事件总线上绑定了过多的 不用监听的事件

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

总结

全局事件总线：

一种组件间的通信方式，适用于任意组件通信( 父子组件，兄弟组件，深层嵌套组件 )

挂载全局事件总线：建议使用该方法，不会增加额外代码，且使用方便

new Vue({render: (h) => h(App),beforeCreate() {Vue.prototype.x = this}
}).$mount("#app");

 使用全局事件总线

// 监听事件
this.$bus.$on('hello', (data) => {console.log('我接受到了数据',data)
})// 触发事件，传递数据
test() {this.x.$emit('hello','我传递了数据')
},

组件销毁之前解绑事件，避免事件总线上绑定过多无用的事件

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