【Vue】基础系列（二十二）——消息的订阅与发布

消息的订阅与发布_pubsub

报纸的订阅与发布：

订阅报纸：住址邮递员送报纸：报纸

消息的订阅与发布

订阅消息：消息名发布消息：消息内容

需要借助第三方库pubsub.js
在项目文件夹下下载这个库

PS E:\Vuejs\组件\调试基础\vue_test_base> npm i pubsub-js在各个组件下需要时导入这个库

import pubsub from 'pubsub-js';

把学生的姓名传递给学校，则学校需要（订阅）消息

mounted(){
		pubsub.subscribe('hello',function(dataName,message){
				console.log('school:'+'有人发布了hello消息,hello消息的回调执行了');
				console.log('消息名是:',dataName,"消息内容是：",message);
			})
		},

methods:{
			sendStudentName(){
				 pubsub.publish('hello',666)
			}
		}

与事件总线一样，在消息订阅完成之后，如果需要销毁组件，那就是要进行解除消息解绑，但对于消息的订阅则是需要这个一个id

mounted(){
			this.pubId = pubsub.subscribe('hello',function(dataName,message){
				console.log('school:'+'有人发布了hello消息,hello消息的回调执行了');
				console.log('消息名是:',dataName,"消息内容是：",message);
			})
		},

组件的vc，this添加一个this.pubId来确定消息的来源。
然后对这个消息进行解绑。

// 销毁组件之前解除傀儡身上的事件绑定
		beforeDestroy() {
			pubsub.unsubscribe(this.pubId)
		},

关于这个消息订阅里面的this指向，如果针对

但是可以用箭头函数，向外指向

this.pubId = pubsub.subscribe('hello',(dataName,message)=>{
				console.log(this);
			})

这样就会使得this指向自己的组件，从而正常使用，或者是通过mentho配置项来完成这样的做法。