reactjs中使用PubSub监听机制传参

最新推荐文章于 2025-06-15 11:13:50 发布
置顶 最新推荐文章于 2025-06-15 11:13:50 发布
阅读量6.6k 收藏 7
点赞数
CC 4.0 BY-SA版权
分类专栏： Reactjs 文章标签： React 监听传参 子父组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zfan520/article/details/78612088
本文介绍了如何在ReactJS应用中利用PubSubjs库进行子父组件之间的参数传递。通过在子组件`home.js`中使用`PubSub.publish`发送状态，而在父组件`App.js`中通过`PubSub.subscribe`订阅并接收消息，实现了实时监听和更新。文章还提及了在React-Router 4.0中如何建立子父组件的关系。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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元/天 解锁文章

200万优质内容无限畅学
vue3.0系列（vue2.6-cli3.x）组件传参（兄弟） 第三方pubsub-js 的使用
一点一滴
12-14 3718
进行兄弟传参方式有很多（vuex，new vue等方式）本节介绍第三方库pubsub-js 的使用 一：组件订阅 ; (function () { const template = `<div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li ...
ipfs-chat：使用IPFS pubsub的无服务器聊天应用程序
02-04
当新消息发布时，IPFS Pubsub会触发一个事件，应用监听这个事件并处理新消息，如显示在聊天窗口中。 5. **安全性与隐私**：尽管IPFS Chat避免了中心服务器，但用户间的通信仍然需要保护。开发者需要考虑如何加密...
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
react使用pubsub事件订阅，组件间通信
weixin_30614109的博客
03-22 836
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.u...
React组件通信——发布订阅（pub/sub）
anxinbuxinan的博客
06-15 257
PubSubJS 是一个轻量级的发布-订阅(publish-subscribe)模式库，可以在 React 应用中实现组件间的松耦合通信，特别适合非父子组件或远房组件间的消息传递。通信双方不需要知道彼此存在一对多的消息分发需求需要降低系统耦合度需要支持未来未知的订阅者跨团队/跨模块协作开发。
react中使用 PubSubJS（发布和订阅）实现任意组件通信
想好了再写！
04-20 779
PubSubJS可以实现任意组件通信，再也不用担心多层组件嵌套传参的问题啦 1.安装： npm install pubsub-js 2.引入: import PubSub from 'pubsub-js' 3.使用 在需要的组件中调用 App.jsx Header.jsx List.jsx 重要代码说明： //发布消息 PubSub.publish('发布的名称','发布的值') //订阅消息 PubSub.subscribe('订阅的名称', (_, data) => {console.log
React应用中的消息订阅发布模式实践：PubSub库的应用
JudithHuang的博客
03-04 1015
在React应用中，实现组件间的通信是至关重要的。本文将介绍如何使用PubSub库实现消息订阅发布模式，在Search组件中发布消息，然后在Users组件中订阅并响应。通过这种模式，我们可以实现组件间的解耦，提高代码的可维护性和可扩展性。
React使用pubsub-js订阅发布和取消订阅
sunnyjingqi的博客
07-09 1582
PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。在componentWillUnmount中取消订阅
物联网通信协议_MQTT客户端连接管理_Elixir语言实现_支持TCP和SSL连接_订阅发布系统_QoS0-2质量服务_断线重连机制_遗嘱消息处理_系统事件PubSub监听_用于构建稳定可靠.zip
最新发布
06-17
系统事件PubSub监听则是利用了Elixir语言提供的进程间通信机制，允许客户端监听特定事件，并在事件发生时执行相应的逻辑处理。这一功能在构建复杂的物联网应用时显得尤为重要，可以极大地增强系统的响应能力和灵活性...
graphql-google-pubsub：使用Google PubSub的graphql订阅PubSub引擎
02-04
它允许您将订阅管理器连接到Google PubSub机制，以支持多个订阅管理器实例。 安装 npm install @axelspringer/graphql-google-pubsub或yarn add @axelspringer/graphql-google-pubsub 用作AsyncIterator 使用...
react同级组件传值,使用pubsub.js
前端小白的逆袭
11-08 514
react同级组件传值,使用pubsub.js
react组件传参 pubsub-js库的使用
weixin_38222276的博客
04-15 256
pubsub发布订阅机制 1.先订阅，再发布（理解：有一种隔空对话的感觉） 2.适用于热议组件间通信 3.要在组件的componetntWillUmount中取消订阅 import PubSub from 'pubsub-js' // or when using CommonJS const PubSub = require('pubsub-js'); //订阅消息 var token = PubSub.subscribe('MY TOPIC', (_,data)=>{ console.log(da
react 任意组件组件通讯包 pubsub-js
web00_11的博客
05-25 329
pubsub-js 包的使用
React组件通信方式-PubSubJs
qq_27324469的博客
08-14 496
React组件通信方式1通过props传递2消息订阅和发布机制用到的库使用方法 1通过props传递 2消息订阅和发布机制 用到的库 PubSubJs 使用方法 下载 npm install --save pubsub-js 在用户搜索中，需要在兄弟组件Search和Main之间通信，可以用到PubSubJs 在Search组件中发布消息，类似于绑定监听，发布消息需要指定消息名和数据，订阅消息需要指定消息名和回调函数 导包 import PubSubJs from "pubsub-js" 在Sea
react 中使用订阅者 发布者模式pubsub
qq_60976312的博客
06-30 564
react 中使用订阅者 发布者模式pubsub
pubsub.js在react和vue中使用
hkduan的博客
07-10 542
pubsub 最基础 的使用方法 react和vue的组件通信都可以用这个第三方pubsub.js 发布 import Pubsub from 'pubsub-js' export const pubsubID = 'd806a360-21aa-406e-9e5f-7f375087514f' // pubsub token Pubsub.publish(StationStatisticsID, data) // 或 PubSub.publishSync(StationStatisticsID, data)
react组件间通信(pubsub)
weixin_52005030的博客
08-30 302
安装: npm install pubsub-js --save 使用: 首先是引入:importPubSubfrom'pubsub-js',触发事件发送数据 import React, { Component } from 'react' import PubSub from 'pubsub-js' export default class Search extends Component { search = ()=>{ PubSub.publish('atguigu',{...
react pubsub-js
qq_43613029的博客
06-11 718
订阅者--发布者模式 订阅者是接收数据，发布者是把自己的数据分享出去，然后碰到订阅者接收数据。 1、安装
React-PubSub.js(消息订阅)
weixin_47586598的博客
09-02 323
React-PubSub.js(消息订阅)
JavaScript中PubSub模式的实现与使用指南
在JavaScript中实现PubSub模式通常会用到事件监听和触发机制。库函数被用来注册事件监听器（订阅者）和触发事件（发布消息）。这样，当事件被触发时，所有订阅了该事件的监听器都会被调用。 3. 安装方法： 根据...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值