Vue-消息订阅与发布(pub/sub)

消息订阅与发布(pub/sub)

消息订阅与发布和全局事件总线一样,也是一种组件间通信的方式

pub/sub全称为publisher(订阅)/subscriber(发布),一般需要数据的人订阅消息,提供数据的人发布消息

这个技术非常简单容易上手,主要有以下两步

1 订阅消息:消息名

2 发布消息:消息内容

想要实现这个功能,原生js不太行,需要借助第三方库,这里推荐pubsub-js,使用了这个库之后就可以在任意框架里面实现消息的订阅发布

想要使用pubsub-js,首先需要安装,所以第一步先安装

1 安装pubsub-js

首先打开终端,输入以下命令,这个库非常的小,安装很快

注意:千万不要少了后面的-js,不然就安装错了,是另外的一个库

npm i pubsub-js

Vue-消息订阅与发布(pub/sub)_第1张图片

2 引入pubsub-js

安装完了之后,就可以引入使用了,这里的pubsub是一个对象,里面有很多api

   //引入pubsub-js库
   import pubsub from 'pubsub-js'

Vue-消息订阅与发布(pub/sub)_第2张图片

3 使用pubsub-js(订阅方)

引入完毕后,就可以简单使用了,下面是我编写的案例,这里是订阅方

主要内容就是消息名要对应发布方的消息名,以及接收参数,这里接收参数有个小坑,请看下面

Vue-消息订阅与发布(pub/sub)_第3张图片

4 使用pubsub-js(发布方)

这里是发布方的代码

主要内容就是消息名要对应订阅方的消息名,以及传递参数

Vue-消息订阅与发布(pub/sub)_第4张图片

5 一个坑(回调函数两个参数)

编写好订阅方和发布方之后,我们可以测试代码了

Vue-消息订阅与发布(pub/sub)_第5张图片

这里发现参数不对,我传的是学生的name,参数却是消息名称

Vue-消息订阅与发布(pub/sub)_第6张图片

这里是因为订阅的回调函数,实际上有两个参数,1:消息名称 2:参数

Vue-消息订阅与发布(pub/sub)_第7张图片

这样就对了

Vue-消息订阅与发布(pub/sub)_第8张图片

如果不想使用第一个参数,可以使用下划线_占位,保证收到的是正常的参数

Vue-消息订阅与发布(pub/sub)_第9张图片

到这里基本代码就写完了,想要代码写的更完美,可以做一件收尾的事情,也就是组件销毁取消订阅

6 组件销毁取消订阅

组件要被销毁的时候,应该取消订阅

Vue-消息订阅与发布(pub/sub)_第10张图片

7 关于this的指向

当我们使用vue配合这个库的时候,this不是vc实例对象,而是undefined

Vue-消息订阅与发布(pub/sub)_第11张图片

Vue-消息订阅与发布(pub/sub)_第12张图片

写法1 箭头函数

如果我们想要让this指向vc实例,可以使用箭头函数,这时候再查看this,发现正常了,只要不归vue管理的函数,如果想让this指向vue,都要写成箭头函数,如果归vue管理,那么写成普通函数即可

Vue-消息订阅与发布(pub/sub)_第13张图片

Vue-消息订阅与发布(pub/sub)_第14张图片

写法2 普通函数

这种写法还是写成普通函数,但是位置不同,我们可以把逻辑提出来,在methods里面定义实现

Vue-消息订阅与发布(pub/sub)_第15张图片

Vue-消息订阅与发布(pub/sub)_第16张图片

8 总结

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

  2. 使用步骤:

    1. 安装pubsub:npm i pubsub-js
    2. 引入: import pubsub from 'pubsub-js'
    3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
    4. methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }
      
    5. 提供数据:pubsub.publish('xxx',数据)
    6. 最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅。

你可能感兴趣的:(Vue,vue.js,javascript,前端)