学习Vue全局事件总线总结

今天学习了Vue的全局事件总线和消息订阅与发布，它们两个都是为了实现任意组件之间的通信，全局事件总线是利用了Vue的一个重要的内置关系，就是组件构造函数原型的对象原型指向的是Vue原型，知道这个重要的指向之后，我们通过给Vue实例对象身上添加一个组件可以使用的Vue原型，这样new出来的组件实例对象就可以通用原型链找到我们给它添加的Vue原型，为什么要这样添加呢，因为从控制台中打印Vue实例对象的this身上有$on、$emit、$off的方法，从而得知只要组件拥有Vue原型就可以使用这些方法了，而消息订阅与发布是使用第三方库去实现组件之间的通信。

使用全局组件总线具体的步骤，首先第一步是安装全局事件总线，需要到main.js文件中的Vue实例对象中给Vue实例对象添加一个名为$bus（这个可以自定义，但bus有总线的意思所以习惯使用bus这个单词）

new Vue({
	......
	beforeCreate(){
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
}
	......
})

第二步就是使用事件总线，这里需要两个组件之间来进行配合才能接收数据。接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

// A组件
methods:{
	demo(data){......}
}
......
mounted(){
	this.$bus.$on('xxx',this.demo)
}

第三步就是提供数据的组件去触发事件：

// B组件
this.$bus.$emit('xxx',传给A的数据)

最后为了避免占有资源，组件删除了但绑定的事件还没有删除，所以在我们最好在销毁组件的deforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

还有一种组件组件间通信的方式是通过消息订阅与发布（pubsub），这里需要使用到第三方库，但能实现这个功能的第三方库非常多，它们的语法也略有不同，但这里就使用 pubsub-js这个第三方库来举例子。

第一步首先是安装第pubsub-js三方库，在cmd控制台输入npm i pubsub-js命令进行下载。

第二步需要在订阅和发布的两个组件中去引入pubsub-js库。

import pubsub from 'pubsub-js'

第三步接收数据在接收组件中配置好：A组件想要接收数据，则在A组件mounted钩子函数中订阅消息，订阅的回调留在A组件自身。

// A组件
methods(){
	demo(data){......}
}
......
mounted(){
	this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

第四步在提供数据组件中去触发在A组件配置好的事件名xxx。

pubsub.publish('xxx',传给A的数据)

同样为了删除组件之后事件占用资源的问题，最好在beforeDestroy钩子中，使用pubsub提供的删除方法：PubSub.unsubscribe(pid)去取消订阅。