美文网首页
vue-消息订阅与发布

vue-消息订阅与发布

作者: tutututudou | 来源:发表于2022-07-03 01:51 被阅读0次

    消息订阅与发布

    这第三方库,可以让组件之间相互通信

    安装如下:

    //这是我们选择的库
    npm i pubsub-js
    

    需要订阅和发布的组件导入这个包

    import pub from 'pubsub-js'
    

    shool.vue

     // 接收消息,消息名是sendMsg
      this.pubId = pub.subscribe('sendMsg',(msgName,data) =>{
        console.log('--shool组件收到消息了--',data)
      })
    

    第一个参数msgName,打印的是发布名sendMsg,第二个参数data才是接收发布的数据
    但是一般不需要第一个参数,所以可以用_来占位第一个参数;如下:

    //用this是为了指定为组件实例对象,不然this就是subscribe的实例对象
     this.pubId = pub.subscribe('sendMsg',(_,data) =>{
        console.log('--shool组件收到消息了--',data)
      })
    

    test.vue

    //发布消息,API是publish
       pub.publish('sendMsg',444)
    

    shool.vue取消订阅

    //在销毁前取消订阅,this.pubId这是指定哪个订阅
    beforeDestroy(){
       pub.unsubscribe(this.pubId)
     }
    

    相关文章

      网友评论

          本文标题:vue-消息订阅与发布

          本文链接:https://www.haomeiwen.com/subject/xfwarrtx.html