组件通信之pubsub

简介: 组件通信之pubsub

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('主题','内容')


订阅

// token:保留返回的令牌,以便能够取消订阅
token = PubSub.subscribe('主题',(titleName,data)=>{
  //titleName 主题名称
  //data 返还的数据
})


取消订阅

一般在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.state
  return(
    <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)}>
  )
  }
}
相关文章
|
7月前
|
JavaScript 前端开发 API
第二十九章 使用消息订阅发布实现组件通信
第二十九章 使用消息订阅发布实现组件通信
|
JavaScript
Vue 消息订阅与发布 (任意组件间通信)
Vue 消息订阅与发布 (任意组件间通信)
|
2月前
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
160 0
|
3月前
|
存储 JavaScript 安全
组件通信——provide 和 inject 实现爷孙组件通信
组件通信——provide 和 inject 实现爷孙组件通信
|
4月前
Vue3使用Mitt中央事件总线实现组件之间通讯(发布订阅库)
Vue3使用Mitt中央事件总线实现组件间的发布订阅通信,替代了Vue2中已移除的EventBus。
476 0
|
6月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
7月前
组件间的通信
组件间的通信
【Vue2.0】— 消息订阅与发布pubsub(二十)
【Vue2.0】— 消息订阅与发布pubsub(二十)
|
前端开发
React-跨组件通讯-events
React-跨组件通讯-events
118 1