reactjs中使用PubSub监听机制传参

最新推荐文章于 2024-03-04 15:38:12 发布
置顶 VIP文章 最新推荐文章于 2024-03-04 15:38:12 发布
阅读量6.5k 收藏 7
点赞数
分类专栏： Reactjs 文章标签： React 监听传参 子父组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zfan520/article/details/78612088
版权

1、PubSub使用方式

1.1 react导入库

npm install pubsub-js --save

1.2 react 页面引入pubsubjs

import PubSub from 'pubsub-js'

1.3 pubsubjs使用

发送消息：PubSub.publish(名称,参数)
订阅消息：PubSub.subscrib(名称,函数)
取消订阅：PubSub.unsubscrib(名称)

PS:pubsubjs源码及使用详情 https://github.com/mroderick/PubSubJS

2、React实例使用监听实现传参


2.1 子页面home.js使用PubSub.publish发送state</

最低0.47元/天 解锁文章
zfan520
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
graphql-google-pubsub：使用Google PubSub的graphql订阅PubSub引擎
02-04
它允许您将订阅管理器连接到Google PubSub机制，以支持多个订阅管理器实例。 安装 npm install @axelspringer/graphql-google-pubsub或yarn add @axelspringer/graphql-google-pubsub 用作AsyncIterator 使用...
PubSub模式简单实现
Jour的博客
11-30 6451
PubSub是一种设计模式，中文叫发布订阅模式，简单来说就是消息发布者不直接向订阅者发布消息，而是发布到中介，而中介根据不同主题对消息进行过滤，并通知对该主题感兴趣的订阅者。该模式在前端现在很火的组件化开发十分常用，因为该模式松耦合，易于扩展的优点正式组件化开发所需要的。 一个PubSub模型主要方法有3个，订阅，退订，发布，下面尝试在前端实现一个最简单的PubSub模块。 var Pub
React中组件通信方式（二）：PubSub订阅与发布
一只路过的小码农
05-16 2750
前端时间写了React子组件传值父组件方式：子组件利用props调用父组件的自定义事件，即可实现传值。这种方式的局限性很大，如果我组件嵌套的很深，岂不是相当麻烦？ 下面介绍一种不错的方式：PubSub消息订阅与发布 一、安装： npm i pubsub-js -S 二、使用： 在要使用的组件引入：import PubSub from ‘pubsub-js’ 在父组件的componentWill...
React应用中的消息订阅发布模式实践：PubSub库的应用
最新发布
JudithHuang的博客
03-04 537
在React应用中，实现组件间的通信是至关重要的。本文将介绍如何使用PubSub库实现消息订阅发布模式，在Search组件中发布消息，然后在Users组件中订阅并响应。通过这种模式，我们可以实现组件间的解耦，提高代码的可维护性和可扩展性。
react当中组件数据传输方式之（pubsub-js）
qq_39113491的博客
02-21 168
绑定事件监听 === 订阅消息，触发事件 ====发布消息。取消订阅：PubSub.unsubscrib（发布者函数）：pubsub-js一个居于发布/订阅模式的一个中间件。订阅消息：PubSub.subscrib(名称,函数)发送消息：PubSub.publish(名称,参数)任意组件之间通讯，一对多，多对多。
pubsub的基本使用
qq_58174484的博客
01-23 9567
pubsub的基本使用
react pubsub-js
qq_43613029的博客
06-11 631
订阅者--发布者模式 订阅者是接收数据，发布者是把自己的数据分享出去，然后碰到订阅者接收数据。 1、安装
rele:易于使用的Google PubSub
05-06
Relé使与Google PubSub的集成变得简单而轻松。 动机和特点 ，尤其是Google Cloud 是非常强大的工具，但是您可以轻松地对其进行操作。 Relé通过为Publisher，Subscriber和Worker类提供以下功能，实现了无缝集成： ...
关于redigo中PubSub的一点小坑分析
09-09
主要给大家介绍了关于redigo中PubSub的一点小坑的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
pg-notify:使用NOTIFYLISTEN的Postgres PubSub客户端
05-23
使用NOTIFY / LISTEN的Postgres PubSub客户端 特征 自动重新连接 有效负载大小验证 通道和有效载荷消毒 安装 npm install pg-notify yarn add pg-notify 用法 PGPubSub接受与相同的配置。 const PGPubSub = ...
react-gbus：用于react（pubsub）的全局事件总线挂钩
02-16
React全球事件总线 用于响应的全局事件总线挂钩 :wrench: 安装 npm install --save react-gbus :sparkles: 特征 :loudspeaker: 从任何地方广播（发射）（不限于React组件） :leaf_fluttering_in_wind: 不到1KB的超轻量级 :victory_hand: 用TypeScript编写 :package: 用法 import React , { useState } from "react" ; import BusProvider , { useListener , emit } from "react-gbus" ; const FRUIT_CHANGE = "fch" ; function FruitViewer ( ) { const [ Fruit , setFruit ] = useState ( "Choose your Fruit" ) ; useListener ( setFruit , [ FRUIT_CHAN
ipfs-chat：使用IPFS pubsub的无服务器聊天应用程序
02-04
不再起作用。 地址可能已更改。 聊天 使用IPFS pub sub的无服务器聊天应用程序。 使用构建。 通过预览。
React使用pubsub-js订阅发布和取消订阅
sunnyjingqi的博客
07-09 1405
PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。在componentWillUnmount中取消订阅
React 兄弟组件通信（pubsub-js）
weixin_51569223的博客
07-02 163
2.谁接收数据 就在那个组件componentDidMount里面订阅消息 然候在componentWillUnmount里取消订阅。1.先安装 npm i pubsub-js。3.seatch组件 发布数据。
react中发布订阅（pubsub-js）的用法（兄弟之间传值）
weixin_46325878的博客
07-15 905
发布订阅主要用来解决复杂的层集之间的数据交互，比如兄弟之间的复杂传值，这种情况就不适合使用props和context来进行传值。
React-PubSub.js(消息订阅)
weixin_47586598的博客
09-02 262
React-PubSub.js(消息订阅)
pubsub.publish触发一次pubsub.subscribe调用多次解决
MYG_G
07-08 8072
发布订阅模式 发布订阅模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。有时候，你想监听一种状态，当在某种情况下，触发它，然后做一些相应的事，有点儿类似我们的自定义事件。订阅发布，也是解决这一类问题的利器。 我一般用到发布订阅者模式的时候，是在比如，父子传值，兄弟传值没办法满足我的需求，我需要在这个页面操作，要改变另一个不相关的页面里面的数据，这时候就用到发布订阅模式。 用法 pubsub-js publ
Redis PUB/SUB 实现 ASCIIART 图的多种监听实验报告 -- 张学红 编写人
liuyancainiao的博客
04-09 227
目的 环境 过程 准备 实验 目的 实验 Redis PUB/SUB 功能实现 ASCIIART 图的奇偶分发，并进行单频道和多频道监听。 环境 操作系统：Linux - Red Hat Enterprise Linux Server release 6.8 (Santiago) 核心版本：2.6.32-642.el6.x86_64 查看 linux 环境命令展...
vue3pubsub使用
09-02
在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 ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值