消息订阅与发布

消息订阅与发布

文章目录

​​原理​​​​语法注解​​​​代码实操​​​​总结​​

原理

消息的订阅与发布同样可以实现任意两个组件间的通信

其分为两个步骤：

订阅消息发布消息

接下来我们通过一个例子去理解它的步骤：

现在我们想要实现组件A与C之间的通信(假设是组件C发送数据给A组件)：

首先组件A要订阅一个消息(我们假设这个消息名叫demo)随后我们再制定一个回调(我们假设这个回调的名字是test)组件C发送消息，并携带着数据(我们也要将这个消息命名为demo)C组件一旦发布了消息，因为A组件订阅了这个消息，所以相应的回调函数会被执行，数据以参数的形式传递给了A组件。

所以说这个消息名很重要，你订阅的时候是什么名，你发布的时候就是什么名。

原生js无法轻松的实现消息的订阅与发布。所以我们一般是借助第三方库去完成这个功能。

这里我使用的是​​pubsub.js​​，它可以在任意框架中实现消息的订阅与发布。

语法注解

首先我们安装​​pubsub.js​​：

npm i pubsub-js

引入语法：

import pubsub from 'pubsub.js'

这个引入的pubsub其本质是一个对象

这里我们首先介绍一下，他的相关API：

消息的发布语法：

pubsub.publish('name',value)

消息的订阅语法：

PubSub.subscribe('name',回调方法)

注意： 这里的回调函数有两个形参： 第一个形参代表消息名 第二个形参代表传递的数据

取消订阅的语法：

取消指定的订阅

Pubsub.unsubscribe('name')

取消所有的订阅

PubSub.clearAllSubscriptions()

代码实操

我们沿用全局事件总线中的代码。仍然是Student组件向School组件发送学生姓名。

首先因为School组件是消息的接收方，所以我们先在School组件中进行消息的订阅：

然后我们再在Student组件中进行消息的发布：

效果：

最后我们还要进行收尾工作，在School组件中进行消息订阅的解绑：

消息订阅的解绑有点类似与定时器的关闭：

总结

消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信。使用步骤：

安装pubsub：​​npm i pubsub-js​​引入:​​import pubsub from 'pubsub-js'​​接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){ demo(data){......}}......mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息}

提供数据：​​pubsub.publish('xxx',数据)​​最好在beforeDestroy钩子中，用​​PubSub.unsubscribe(pid)​​去取消订阅。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。