vue——全局事件总线（GlobalEventBus）

一.什么是全局事件总线？

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

是根据VueComponent.prototype.__ proto__ = Vue.prototype的原理来进行全局引用

二.全局事件总线的使用？

（i）安装全局事件总线

在main.js中的vue实例中写入beforeCreate

其中bus可以改其他名字，this指定vue实例

 

（ii）使用事件总线（分为两步：传递数据，接收数据）

我这总共用两个组件：school组件、student组件

1.student组件向school组件传递数据

使用emit传递数据（此组件为student组件）

传递数据写法：this.$bus.$emit('xxxx',数据)

 

2.school组件接收student传来的数据

使用on接收数据（此组件为school组件）

接收数据写法：this.$bus.$on('xxxx',data=>{.......})

接收的函数要用箭头函数，this指向VueComponent，如果是普通函数则指向Vue函数

 

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

 

4.结果：