vue-消息订阅与发布

消息订阅与发布

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

安装如下:

//这是我们选择的库
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)
 }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容