在VUE的兄弟组件间的通信中会有一个Event-Bus事件总线,而在react中没有这个辅助的函数来实现通信,但是在项目较小的兄弟间的通信中,react给出了一个类似事件总线的方法--伪事件总线。

伪事件总线通过node中的Event模块实现,Event可以实现也可以触发事件,react通过Event的这个属性来解决兄弟间的通信。

首先创建一个js文件(eg:demo.js),

  import {EventEmitter} from 'events'

  //让一个变量接收EventEmitter的原型链

  let bus={...EventEmitter.prototype}

  export default bus

创建两个兄弟组件(分别是a.js 和b.js)以及一个中间组件(middle.js)(主要用来链接兄弟组件,给两兄弟组件传话),在中间组件中引入两个兄弟组件并将中间组件引入到入口js文件中进行显示。

两个兄弟组件中分别引入 demo.js (例如,b.js想要改变a.js中的name ),则在a.js的构造函数中设置原始的state,并在componentWillMount生命周期中注册改变数据的事件:

  bus.on('changeName'=>{this.setState({name:'B'})})

注册事件完成后在b.js中触发该事件:

  bus.emit('changeName')

伪事件总线的实现原理是基于events事件的特点完成的,即在任何能拿到event事件的地点通过注册跟触发事件来完成数据的改变。

思路:先拿到数据,再更改数据。

posted on 2019-03-06 14:49  --chenchen--  阅读(312)  评论(0编辑  收藏  举报