消息订阅与发布 pubsub

1.一种可以实现组件间相互通信的方式,适用于任意组件通信

2.使用步骤:

        1.安装pubsub  

npm i pubsub-js

        2.引入:import pubsub from "pubsub-js

        3.发布消息:A组件要发布数据,则在A组件中发布消息

methods: {
        sendMsg(data){
            pubsub.publish("hello",data)
        }
    },

        4.接收数据:B组件接收数据,则在B组件中订阅消息

mounted() {
        
        pubsub.subscribe("hello",(a,b)=> {
            console.log("有人发布了消息",a,b);
            //a是事件名称,b是传递的数据
        })
    },

        5.取消订阅 因为每一次订阅都可以产生一个不同的值,可以通过一个id来取消订阅,类似于定时器,所以订阅小时时可以写成

mounted() {
        
       this.pubId= pubsub.subscribe("hello",function(a,b) {
            console.log("有人发布了消息",a,b);
            //a是事件名称,b是传递的数据
        })
    },

销毁订阅

beforeDestroy() {
    //销毁
   
    pubsub.unsubscribe("pubId")
  }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值