vue事件总线$bus解释与使用

事件总线使用原理：

	在vue组件间传值，除了我们熟悉的父子组件间通过props和事件$emit传值及兄弟组件间传值以外，实际需求中，通常两个毫无关系的组件间也需要进行传值传参，但在不需要vuex的前提下，使用vue事件总线传值是最快捷有效的方法。

事件总线简介：

EventBus在组件间起到桥梁的作用，使得每个组件间都可以互相通信和传参，但由于过于简洁和方便，就会造成愈多难以维护的问题，因此，为了解决事件总线的弊端，vue推出vuex仓库来作为数据和状态的管理中心(后续将会讲解）

EventBus引入：
首先在项目main.js将要创建Vue实例VueComponent前引入，而Vue实例vm身上存在$on和$emit两个属性，这两个属性也将在EventBus使用时调用，具体使用方法如下：

1. 方式一： main.js

// 形式一
let bus = new Vue()  

Vue.prototype.$bus = bus

// 形式二 
Vue.prototype.$bus = new Vue()

2. 方式二： main.js

// 你可以在Vue的生命周期beforecreate里面写，里面的this不就是Vue的实例对象vm，也就是下面这种写法
new Vue({ beforeCreate() { Vue.protoType.$bus = this; } })

EventBus的使用：

1. 发送事件this.$bus. $emit()

// 在事件发送的组件中
this.$bus.$emit('getNoticeList','我是事件传递的消息')

2. 接受事件this.$bus. $on()

// 在事件接受的组件中 
this.$bus.$on('getNoticeList',msg => {console.log(msg)})
// 切记： 此处调用时使用箭头函数，否则将会报错

移除事件监听者

this.$bus.$off('getNoticeList')

图解