首页 > 其他 > 详细

伪事件总线的使用

时间:2019-03-06 16:09:44      阅读:152      评论:0      收藏:0      [点我收藏+]

在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事件的地点通过注册跟触发事件来完成数据的改变。

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

伪事件总线的使用

原文:https://www.cnblogs.com/--chenchen--/p/10483178.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!