reactjs中使用PubSub监听机制传参

最新推荐文章于 2025-09-04 08:02:10 发布
原创 最新推荐文章于 2025-09-04 08:02:10 发布 · 置顶 · 6.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#React #监听传参 #子父组件

本文介绍了如何在ReactJS应用中利用PubSubjs库进行子父组件之间的参数传递。通过在子组件`home.js`中使用`PubSub.publish`发送状态，而在父组件`App.js`中通过`PubSub.subscribe`订阅并接收消息，实现了实时监听和更新。文章还提及了在React-Router 4.0中如何建立子父组件的关系。

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元/天 解锁文章
pubsub.publish触发一次pubsub.subscribe调用多次解决
MYG_G
07-08 8664
发布订阅模式 发布订阅模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。有时候，你想监听一种状态，当在某种情况下，触发它，然后做一些相应的事，有点儿类似我们的自定义事件。订阅发布，也是解决这一类问题的利器。 我一般用到发布订阅者模式的时候，是在比如，父子传值，兄弟传值没办法满足我的需求，我需要在这个页面操作，要改变另一个不相关的页面里面的数据，这时候就用到发布订阅模式。 用法 pubsub-js publ
React学习
weixin_53126517的博客
03-18 1362
文章目录一、React的简介1、介绍2、特点3、框架对比二、环境搭建1、引入文件的方式2、官方脚手架(模块化)第三方脚手架第一个React程序JSX1、JSX的介绍2、特点：3、JSX的语法**ReactDOM.render()函数**条件渲染列表渲染组件函数方式的组件ES5的写法：ES6类的写法：多个组件props外部传值：组件内部使用： 一、React的简介 1、介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC
react使用pubsub事件订阅，组件间通信
weixin_30614109的博客
03-22 851
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-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
Redis Pub/Sub：原理与高级特性解析
最新发布
我是Java程序员廖志伟，感谢朋友们的支持！
09-04 697
📕我是廖志伟，一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》、（架构篇）、作者、清华大学出版社签约作家、Java领域优质创作者、CSDN博客专家、阿里云专家博主、51CTO专家博主、产品软文专业写手、技术文章评审老师、技术类问卷调查设计师、幕后大佬社区创始人、开源项目贡献者。
react中使用 PubSubJS（发布和订阅）实现任意组件通信
想好了再写！
04-20 792
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-js订阅发布和取消订阅
sunnyjingqi的博客
07-09 1605
PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。在componentWillUnmount中取消订阅
React学习教程（开发文档、学习文档）
zsy1833579605的博客
05-29 2801
React学习教程（开发文档、学习文档）。React的一些基础语法，以及相关插件。
react同级组件传值,使用pubsub.js
前端小白的逆袭
11-08 531
react同级组件传值,使用pubsub.js
React应用中的消息订阅发布模式实践：PubSub库的应用
JudithHuang的博客
03-04 1076
在React应用中，实现组件间的通信是至关重要的。本文将介绍如何使用PubSub库实现消息订阅发布模式，在Search组件中发布消息，然后在Users组件中订阅并响应。通过这种模式，我们可以实现组件间的解耦，提高代码的可维护性和可扩展性。
react组件传参 pubsub-js库的使用
weixin_38222276的博客
04-15 266
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 343
pubsub-js 包的使用
React组件通信方式-PubSubJs
qq_27324469的博客
08-14 507
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 578
react 中使用订阅者 发布者模式pubsub
pubsub.js在react和vue中使用
hkduan的博客
07-10 551
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 312
安装: 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 732
订阅者--发布者模式 订阅者是接收数据，发布者是把自己的数据分享出去，然后碰到订阅者接收数据。 1、安装
React-PubSub.js(消息订阅)
weixin_47586598的博客
09-02 332
React-PubSub.js(消息订阅)
react中同级组件传值（PubSubjs使用说明）
苦夏木禾
09-02 563
PubSubjs使用说明安装示例基本示例取消特定订阅清除主题的所有订阅清除所有订阅获取订阅计数订阅错误处理分层地址使用 PubSubJS 是一个基于主题的发布/订阅库，以 JavaScript 书写。 安装 通过命名行 npm i pubsub-js 示例 基本示例 // 创建一个函数来订阅主题,接收参数和进行下一步操作 var mySubscriber = function (msg, data) { console.log( msg, data );// msg主题名，data参数 }; //
JavaScript中PubSub模式的实现与使用指南
在JavaScript中实现PubSub模式通常会用到事件监听和触发机制。库函数被用来注册事件监听器（订阅者）和触发事件（发布消息）。这样，当事件被触发时，所有订阅了该事件的监听器都会被调用。 3. 安装方法： 根据...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值