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的基本使用了,希望对您有所帮助^_^。

  • 7
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中使用pubsub可以按照以下步骤进行: 1. 首先,在App.vue文件中引入pubsub库,并进行订阅消息。可以在以下代码中看到具体的实现: ```javascript import PubSub from 'pubsub-js' // ... this.PubSub.subscribe("msg", (msg, data) => { // 接收到消息后的处理逻辑 }) ``` 2. 其次,你需要安装pubsub.js库。可以通过在终端中运行以下命令来安装它: ```bash npm install pubsub-js --save ``` 3. 在Main.js中执行以下代码来将PubSub库引入到Vue的原型中,以便在整个应用程序中都可以使用它: ```javascript import PubSub from 'pubsub-js' Vue.prototype.PubSub = PubSub ``` 4. 发布消息:使用以下代码来发布消息,其中"要发送的消息"是你要发送的具体消息内容: ```javascript this.PubSub.publish("msg", "要发送的消息") ``` 5. 订阅消息:使用以下代码来订阅消息,其中"msg"是必须要写的,你可以使用data来接收需要的数据: ```javascript this.PubSub.subscribe("msg", (msg, data) => { // 接收到消息后的处理逻辑 }) ``` 6. 取消订阅:如果想要取消特定的订阅,可以使用以下代码取消: ```javascript this.PubSub.unsubscribe(subscription) ``` 以上就是使用vue3pubsub基本步骤,你可以根据需要在代码中进行具体的实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue3 _ 20. Vue 多组件沟通 - Pubsub 消息组件](https://blog.csdn.net/weixin_45908370/article/details/118905153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [一、PubSub 的Vue使用方式](https://blog.csdn.net/weixin_52834606/article/details/124636609)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值