pubsub的基本使用

pubsub，即订阅发布，在vue中常常被用于任意组件间的传值。

原理类似于视频网站中，如果你订阅了某个订阅号，那么该订阅号发布的视频你就能在第一时间接收到了。

本文主要简述pubsub的基本使用流程。

1.在终端进行pubsub的安装

npm i pubsub-js

2.在需要进行传值的位置引入pubsub

import PubSub from 'pubsub-js'

3.订阅操作：

需要接收值的组件中，在mounted钩子函数中进行订阅（subscribe），并将接收到的值作为参数传递到本组件中指定的方法中：

例：下面代码中，subscrib方法e的第一个参数（yyds）为订阅名，第二个（getmes）为接收数据的方法。

这里定义pid是为了方便未来进行取消订阅的操作。

methods(){
  getmes(_,res){ alert(res) }		//接收数据的方法，它的参数第一个为接收的订阅名，不需要调用，可直接用_来占位，避免eslint报错。第二个为传来的数据，当传有多个数据时，可用一个对象来传递。
}
......
mounted(){
		this.pid=PubSub.subscribe("yyds",this.getmes)		//订阅消息，这里定义变量pid是为了方便未来取消订阅
}

4.传值操作：

在需要传值的组件中，进行信息的发布（publish）：

publish方法的第一个参数（yyds）为订阅名，第二个参（message1）为想要传递的变量。

PubSub.publish('yyds','message1')		//通过事件触发方法发布信息‘message1’

这样，传递过来的message1便能够在订阅的组件中接收并使用了。

5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

以上就是订阅发布pubsub的基本使用了，希望对您有所帮助^_^。

标签：基本,订阅,pid,message1,使用,PubSub,传值,pubsub
来源： https://blog.csdn.net/qq_58174484/article/details/122650453