码迷,mamicode.com
首页 > 其他好文 > 详细

react兄弟组件传值

时间:2020-08-01 14:37:35      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:发布   color   port   lis   rem   数据   events   api   参数   

react中实现数据的共享可以通过react提供的Context组件,但是开发中经常有跨组件之间的事件传递。在vue中可以通过事件总线的方式(在Vue的原型链上挂载一个Vue的实例)。

在react中可以借助第三方库来完成。这里推荐两个使用较多的库 pubsub-js events 来完成对应的操作。

可以通过npm 或者 yarn 来安装events

  npm install events  /  yarn add events

  events的常用API

  •      创建EventEmitter对象 : const eventBus = new EventEmitter()
  •      发出事件:eventBus.emit(‘事件名称‘,‘参数列表‘)
  •      监听事件:eventBus.addListener(‘事件名称‘,‘监听函数‘)
  •      移出事件:eventBus.removeListener(‘事件名称‘,‘监听函数‘)

 

   通过npm 或者 yarn 来安装events

  • npm install pubsub-js
  • 引入这个依赖  import PubSub from ‘pubsub-js‘
  • 发布消息:PubSub .publish("发布的消息名","提供给订阅者的参数")
  • 订阅消息:PubSub.subcribe("发布的消息名","事件的监听函数")

 

 

 

 

 

    

react兄弟组件传值

标签:发布   color   port   lis   rem   数据   events   api   参数   

原文地址:https://www.cnblogs.com/wywd/p/13414344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!