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

Posted 2022-05-19 勇敢*牛牛

消息的订阅与发布_pubsub

报纸的订阅与发布：

1. 订阅报纸：住址
2. 邮递员送报纸：报纸

消息的订阅与发布

1. 订阅消息：消息名
2. 发布消息：消息内容

需要借助第三方库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配置项来完成这样的做法。