pubsub

释：消息订阅与发布
点击进入gitee

消息订阅与发布机制

1,先订阅,在发布
2,使用于任意组件间通信
3,要在组件的componentWillUnmount中取消订阅

作用

使用于任意组件间通信

安装

yarn add pubsub-js

引入(每个组件使用时都需要)

使用es6引入：import PubSub from 'pubsub-js;
使用CommonJS：const PubSub = require('pubsub-js');

语法

发布

//异步发布主题
PubSub.publish('主题','内容'）
//同步发布主题，这在某些环境中更快
//但是当一个主题在相同的执行链,小心使用
PubSub.publishSync('主题','内容'）

取消订阅

一般在componentWillUnmount中取消订阅

//取消单个订阅,放入令牌即可
PubSub.unsubscribe(token);
//取消函数的所有订阅（这里说的函数就是PubSub.subscribe的第二个参数——回调函数）
PubSub.unsubscribe(fnName);
//清除所有订阅
PubSub.clearAllSubscriptions();

react做的一个小例子

场景：组件a和组件b之间的通信，兄弟关系

//组件a
class A extends Component{state = {obj:{},}componentDidMount() {//订阅this.token = PubSub.subscribe('TEXT', (msg, data) => {this.setState({obj:data})});}componentWillUnmount(){//取消订阅PubSub.unsubscribe(this.token)}render(){let {obj:{text}}=this.statereturn(<div>{`这里时接收到的内容——————`${text}}</div>)}
}

//组件b
class B extends Component{state={obj:{text:''}}onSettext(e){let value = e.target.value;let { obj } = this.state;obj.text = value;this.setState({ obj })// 发送PubSub.publish('TEXT', this.state.obj);}render(){return(<input type="text" onChange={(e)=>{this.onSettext(e)}>)}
}

组件通信之pubsub相关推荐

vue组件通信你还在用笨重的vuex吗
很长一段时间在vue开发项目中组件间通信都是通过vuex实现的,有时候开发一个小项目也要用到插入笨重的vuex来实现组件间交互,有没有一个好的插件可以替代vuex,emmmm~,当然有了!今天给大家介 ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
(React入门)组件通信
1.父组件向子组件通信 props 父组件直接通过props向子组件传递需要的信息 import React, { Component } from 'react' //子组件 class Child ...
Vue2 组件通信 ( 12种 )
1.父子组件之间的通信 (1)父给子传参 props 父组件内,在子组件标签里边使用v-bind(简写为 : )绑定属性,在子组件内使用props接收数据. <Child :count=&quo ...
Vue组件通信:任意组件之间进行通信
之前一篇博客,我们介绍了子组件向父组件通信的方法,可以参考博客: 深度理解Vue组件的子组件向父组件传递数据的通信方式,全面详细,看这一篇就够了,推荐收藏_czjl6886的博客-CSDN博客今天, ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
系列文章目录第一章:React基础知识(React基本使用.JSX语法.React模块化与组件化)(一) 第二章:React基础知识(组件实例三大核心属性state.props.refs)(二) 第 ...
Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...

组件通信之pubsub

pubsub

消息订阅与发布机制

作用

安装

引入(每个组件使用时都需要)

语法

发布

订阅

取消订阅

react做的一个小例子

组件通信之pubsub相关推荐

最新文章

热门文章