消息订阅与发布
一、一种组件间通信的方式,适用于任意组件间通信
二、使用步骤:
1、安装pubsub-js npm i pubsub-js
2、引入pubsub-js库给收数据的组件(引入的这个pubsub是个对象)
import pubsub from 'pubsub-js'
3、接收数据(订阅消息):A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
methods(){
//这里的msgName一般使用不到,可以用一个_去占位(_,data)
demo(msgName,data){
.....
}
}
....
mounted(){
//
this.pubId = pubsub.subscribe('hello', this.demo)
}
//或者不写methods,直接箭头函数完成
mounted(){
//订阅消息
//这里的function可以收到两个参数,一个是消息名,一个是传过来的数据
this.pubId = pubsub.subscribe('hello', (msgName, data) =>{...})
}
这里如果写成这种形式,this是有问题的,this是undefined,所以要写成上面那样的箭头函数,指向的才是VC
this.pubId = pubsub.subscribe('hello', function (msgName, data) {
// console.log('有人发布了hello消息,hello消息的回调执行了', msgName, data)
console.log(this); //undefined,因为用的是第三方的库
})
4、提供数据(发布消息):
methods: {
sendStudentName() {
// 发布消息
pubsub.publish('hello', 1988)
}
},
5、最好在beforeDestroy钩子中,取消订阅
beforeDestroy() {
// 取消订阅,需要通过id取消
pubsub.unsubscribe(this.pubId)
},