最近在跟着某硅谷网课学Vue 学到全局事件总线 写写博客加深自己的印象
全局事件总线的简介
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
vm对象和组件对象的关系
vm的原型对象 === 组件对象的原型对象的原型对象
全局事件总线的使用
vue中自定义事件是可以完成子组件与父组件之间的通信的，因为父组件是可以监控子组件中的转台，为子组件绑定事件，在子组件中也是可以触发父组件中的事件的，具体原因可以了解一下我的上篇博客
然而兄弟组件之间通信就不行了，俩组件互相看不到，不能其中一个给另一个绑定事件。那我们怎么解决呢？
我们可以借助一个中间人（工具人）来帮助我们实现通信，而这个中间人组件一定是两个兄弟组件都能看到的，就是全局事件总线（所有的组件对象都能看到）。就比如说你有件事想拜托一下李四，但你又跟人家不认识，这时候你就要找你们共同的朋友张三当桥梁。而全局事件总线就是一个老好人，跟所有人都认识，谁都可以拜托他去找另一个人办事。
先上个某大佬画的图
成为事件总线的条件
- 所有的组件对象都必须能看得到这个总线对象，因此我们把这个对象放在Vue原型
- 这个事件总线对象必须要能调用on和emit方法(总线对象必须是Vue的实例化对象或是组件对象)
安装
代码语言：javascript复制new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
}) 在main.js里放在beforeCreate()钩子函数里就完事了
使用事件总线
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
代码语言：javascript复制实现A向B通信
//A组件：调用(分发)事件
this.$bus.$emit('xxx',data)
//B组件：绑定事件监听
this.$bus.$on('xxx',this.fn)
methods{
fn(data){
}
}提供数据：this.bus.emit('xxxx',数据)
提示
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
小例子(来自某硅谷网课)
文件目录
App.vue
代码语言：javascript复制<template>
<div class="app">
<h1>{{msg}}</h1>
<School/>
<Student/>
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{School,Student},
data() {
return {
msg:'你好啊！',
}
}
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>School.vue
代码语言：javascript复制<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
mounted() {
// console.log('School',this)
this.$bus.$on('hello',(data)=>{
console.log('我是School组件，收到了数据',data)
})
},
beforeDestroy() {
this.$bus.$off('hello')
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>Student.vue
代码语言：javascript复制<template>
<div class="student">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
}
},
mounted() {
// console.log('Student',this.x)
},
methods: {
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},
}
</script>
<style lang="less" scoped>
.student{
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>main.js
代码语言：javascript复制//引入Vue
import Vue from "vue";
//引入App
import App from "./App.vue";
//关闭Vue的生产提示
Vue.config.productionTip = false;
//创建vm
new Vue({
el: "#app",
render: (h) => h(App),
beforeCreate() {
Vue.prototype.$bus = this; //安装全局事件总线
},
});效果
