消息订阅与发布

消息订阅与发布

一、一种组件间通信的方式,适用于任意组件间通信

二、使用步骤:

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)
        },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值