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

灰太狼 2023-10-12 19:36 60阅读 0赞

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

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

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

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

1 订阅消息：消息名

2 发布消息：消息内容

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

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

## 1 安装pubsub-js ##

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

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

npm i pubsub-js

![99dee468c7d2d993244084b5514c4f27.png][]

## 2 引入pubsub-js ##

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

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

![40716fb3b0e11d41ef283a3adfdee901.png][]

## 3 使用pubsub-js(订阅方) ##

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

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

![fad22e4e03ea5c2713629421f0aba01e.png][]

## 4 使用pubsub-js(发布方) ##

这里是发布方的代码

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

![c1578d9f917e5656a21515ba11a2f769.png][]

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

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

![01c37447d28c461f6493a2422faa307f.png][]

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

![bfbd822e0a7fcf215d1125a434d8ae1c.png][]

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

![d71bba52ac430a1befb47d49ae6c9b99.png][]

这样就对了

![95eda229757f7705a5f28fa9ab0410ce.png][]

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

![74ee6ce029595e66fc09f2aa82620478.png][]

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

## 6 组件销毁取消订阅 ##

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

![4fddfde76c227e8114de4a24eb51396b.png][]

## 7 关于this的指向 ##

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

![2689c7d2b90cdc7f21a54b8cd729617d.png][]

![ae2687ab415174dda5d06663f746ccb1.png][]

### 写法1 箭头函数 ###

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

![17beafa446835f148c168286e9ca8407.png][]

![fc1e3760b8685c97ea5dfd6523c20a89.png][]

### 写法2 普通函数 ###

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

![833410ec0af6a9c6acff621ed6050dfc.png][]

![bdb73a8c46567822b19c3d045194877c.png][]

## 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)`去取消订阅。

[99dee468c7d2d993244084b5514c4f27.png]: https://img-blog.csdnimg.cn/img_convert/99dee468c7d2d993244084b5514c4f27.png
[40716fb3b0e11d41ef283a3adfdee901.png]: https://img-blog.csdnimg.cn/img_convert/40716fb3b0e11d41ef283a3adfdee901.png
[fad22e4e03ea5c2713629421f0aba01e.png]: https://img-blog.csdnimg.cn/img_convert/fad22e4e03ea5c2713629421f0aba01e.png
[c1578d9f917e5656a21515ba11a2f769.png]: https://img-blog.csdnimg.cn/img_convert/c1578d9f917e5656a21515ba11a2f769.png
[01c37447d28c461f6493a2422faa307f.png]: https://img-blog.csdnimg.cn/img_convert/01c37447d28c461f6493a2422faa307f.png
[bfbd822e0a7fcf215d1125a434d8ae1c.png]: https://img-blog.csdnimg.cn/img_convert/bfbd822e0a7fcf215d1125a434d8ae1c.png
[d71bba52ac430a1befb47d49ae6c9b99.png]: https://img-blog.csdnimg.cn/img_convert/d71bba52ac430a1befb47d49ae6c9b99.png
[95eda229757f7705a5f28fa9ab0410ce.png]: https://img-blog.csdnimg.cn/img_convert/95eda229757f7705a5f28fa9ab0410ce.png
[74ee6ce029595e66fc09f2aa82620478.png]: https://img-blog.csdnimg.cn/img_convert/74ee6ce029595e66fc09f2aa82620478.png
[4fddfde76c227e8114de4a24eb51396b.png]: https://img-blog.csdnimg.cn/img_convert/4fddfde76c227e8114de4a24eb51396b.png
[2689c7d2b90cdc7f21a54b8cd729617d.png]: https://img-blog.csdnimg.cn/img_convert/2689c7d2b90cdc7f21a54b8cd729617d.png
[ae2687ab415174dda5d06663f746ccb1.png]: https://img-blog.csdnimg.cn/img_convert/ae2687ab415174dda5d06663f746ccb1.png
[17beafa446835f148c168286e9ca8407.png]: https://img-blog.csdnimg.cn/img_convert/17beafa446835f148c168286e9ca8407.png
[fc1e3760b8685c97ea5dfd6523c20a89.png]: https://img-blog.csdnimg.cn/img_convert/fc1e3760b8685c97ea5dfd6523c20a89.png
[833410ec0af6a9c6acff621ed6050dfc.png]: https://img-blog.csdnimg.cn/img_convert/833410ec0af6a9c6acff621ed6050dfc.png
[bdb73a8c46567822b19c3d045194877c.png]: https://img-blog.csdnimg.cn/img_convert/bdb73a8c46567822b19c3d045194877c.png