关于事件总线
全局事件总线：
1）是为了 实现vue组件之间的通信
2）所有的 组件都能看到管理全局事件的对象
3）由于每一个组件都能通过原型链找到Vue.prototype，所以 管理全局事件的对象就放在Vue.prototype上
4）一般用 $bus 属性作为全局事件管理者
Vue原型对象上包含事件处理的方法
1）$on ( eventName , listener ) ：
绑定自定义事件监听
2）$emit ( eventName , data )：
触发eventName事件
3）$off ( eventName )：
解除事件与外部事件函数的绑定关系
4）$once ( eventName , listener )：
绑定事件监听，但是只能处理一次
全局事件的使用
1）在main.js中指定事件总线对象
在Vue创建之前执行 Vue.prototype.$bus=this ，实际上this可以用任意一个对象替换，自己new一个都可以，如：
//main.js 入口文件
import Vue from "vue";
import App from "./App.vue"new Vue({el:'#app',render:h=>h(App),beforeCreate() {//指定全局事件管理者Vue.prototype.$bus=this}
})2）组件绑定事件
在组件挂载完毕之后调用 this.$bus.$on('事件名',监听函数) 给组件绑定事件,如：
<template><div><h2>学校：{{name}}<br/>地址：{{address}}<br/></h2></div>
</template><script>
export default {data(){return {name:'麻省理工大学',address:'xxx'}},methods:{enterSchool(student){console.log(student.name+"进入了学校")}},mounted() {//将事件绑定全局事件总线this.$bus.$on('enterSchool',this.enterSchool)}
}
</script>3）触发组件事件
通过屌用组件 this.$bus.$emit('事件名',数据) 触发另一个组件的事件，并传递数据，如：
<template><div><h2>学生姓名：{{name}}<br><button @click="enterSchool">进入学校</button></h2></div>
</template><script>
export default {data(){return {name:'张三',}},methods:{enterSchool(){//触发School标签的事件this.$bus.$emit('enterSchool',this)}}
}总结
1）在main.js中创建vue实例之前通过 Vue.prototype.$bus=this 指定全局事件管理者
2）在组件挂载时通过 this.$bus.$on('事件名',监听函数) 绑定事件
3）通过另一个组件的 this.$bus.$emit('事件名',数据) 来触发该组件的事件，并为其传输数据,实现组件间通信