vue 实现任意组件之间的通信

一、全局事件总线

1、创建Vue实例时在Vue原型上绑定vue实例 Vue实例或VueComponent实例中拥有 $on、$once、$emit 而且开发过程中有且只有一个vue实例 不需要额外声明vm 或 vc实例

new Vue({
	el: '#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this	//将自身绑定到Vue原型作为全局总线
	}
})

2、使用时只需要在全局总线中声明绑定事件即可

sendStudentName(){
	this.$bus.$emit('hello',666)	//声明自定义组件
}

mounted(){
	this.$bus.$on('hello',(data)=>{	//绑定自定义事件到全局总线
		console.log(this)
		console.log('我是组件，收到了数据',data)
	})
},
beforeDestroy() {	
	this.$bus.$off('hello')//销毁自定义事件 注意要指定事件名称 不指定会销毁所有自定义事件 而所有组件使用的是同一个总线
}

二、消息订阅与发布

安装第三方消息订阅发布库

例如 安装pubsub.js 执行** npm i pubsub-js **命令

mounted(){
	this.pubId = pubsub.subscribe('hello', (msgname,data)=>{	//订阅消息 第一个参数为消息名称 第二个是回调函数 回调函数中第一个参数为消息名称 第二个参数为获取的数据
		console.log(this)
		console.log('有人发布了hello消息，hello消息的回调执行了',msgname,data)
	})
},
beforeDestroy() {
	pubsub.unsubscribe(this.pubId())	//通过消息订阅Id取消订阅
}

sendStudentName(){
	pubsub.publish('hello',666)	//发布消息 第一个参数为消息名称 第二个参数为消息所带数据
}

消息订阅发布 与 事件总线很相似