Vue事件总线以及原理探究

一、引入事件总线

只需在main.js的创建Vue实例vm之前的时候引入
首先，原理是使用Vue创造的实例vm或者说VueComponent创建的实例vc身上的$on和$emit属性，两者作用的实例必须为同一个，根据这个原理可以写出几种创建事件总线的方法：
第一种方法，你可以在VueComponent的实例对象身上创建：
在入口文件main.js中，可以在new Vue({})（创建Vue实例vm）之前这样写
在这里说一下，在main.js 中无法直接获取VueComponent构造函数，Vue的源码里是通过Vue.extents({})来new一个VueComponet的实例对象vc，可以用 const Demo(此处获得VueComponet的构造函数) = Vue.extend({})； const vc = new Demo(); Vue.prototype.$bus = vc。
第二种方法，直接使用Vue的实例对象身上创建：
首先在这里要注意的时，应该先引入再进行实例Vue对象，读到这里你可能会想到下面这种方法
当然你可以这样写Vue.prototype.$bus = new Vue()
但其实可以想一下，你可以在Vue的生命周期beforecreate里面写，里面的this不就是Vue的实例对象vm，也就是下面这种写法
new Vue({ beforeCreate() { Vue.protoType.$bus = this; } })
当然你可以围着原理变换写法

二、使用事件总线

接下来就可以尽情使用事件总线了
在事件发送的组件中
this.$bus.$emit('sendMsg','我是事件传递的消息')
在事件接受的组件中
this.$bus.$on('sendMsg',msg => {console.log(msg)})
此处注意 若不使用箭头函数，里面的this会出错

三、关闭自定义事件监听

在事件总线用过之后记得应该要把事件监听关闭
可以在事件接受的组件中写
this.$off('sendMsg')
注意：this.$off()里面一定要写值，否则他会把所有自定义事件卸载