react、vue 使用node.js eventEmitter跨组件传参（还可以用来监听值的变化处理一些事情）

前言：

最近在react项目中，遇到了这样一个场景，首页有很多组件，地图组件，侧边栏，图层管理，甚至图层管理还有子组件。这样父/子/孙，甚至没有任何关系的组件都要能拿到首页的一些状态。一开始想要用redux但是为了这么小的地方搭建繁琐的redux显然不明智。（redux当然也可以实现）。其实我这里更推荐react+dva(这个是react轻量级框架把redux内置里面了不用自己搭建redux)。当然还有更简单的方法那就是node.js的eventEmitter。

一、eventEmitter的作用和介绍

event模块是node.js中的一个模块。events 模块只提供了一个对象： events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。（node event模块详细说明及介绍）这里我就不过多的介绍了。因为是node中的模块不光react可以使用vue中也可以使用且步骤相同

二、react中使用步骤（当然vue中也可以使用）

1.下载event模块：运行cnpm install events --save.

2.创建一个文件event.js.

import {EventEmitter} from 'events';//引入events模块
export default new EventEmitter();//导出

3.在需要监听或者传参的地方声明一个监听事件。

    1.)引入刚才创建的event.js(以自己项目的为准)

import emitter from '../../utils/event';//引入event文件。当然这个路径根据你自己项目中创建的为准

    2).监听事件

 this.eventEmitter=emitter.addListener("change",(msg)=>{//msg为传的参数
      console.log(msg)
 })

  emitter.addListener("change",(msg)=>{})。第一个参数是监听事件的名字（用来区分不同的事件）。第二个参数是一个函数可以处理一些情函数的参数就是要穿的值。

  3).定义触发函数.先引入event.js.

 emitter.emit("change","首页")

 emitter.emit("change","首页")。第一个参数为事件名，第二个为传的值。emiter是提交，就是想要改变的时候调用比如我需要改变其它组件的状态，当点击的时候emitter一个事件把传的值放进去（比如点击按钮让，没有关系的组件打印传的值）。

三、示例

1. 监听事件

import emitter from '../../../src/utils/event';//引入events文件
class MapTools extends React.Component {
componentDidMount(){
    this.eventEmitter=emitter.addListener("change",(msg)=>{
     console.log(msg)//这里结果为首页
    })
}
  return(<div>
     我是组件
 </div>)
}

2.触发事件

import emitter from '../../../src/utils/event';//引入events文件
class Map extends React.Component {
  change(){
    emitter.emit("change","首页")
  }
}
  return(<div>
     <button onClick={this.change}>点击传参</button>
 </div>)
}

 这个emitter这个不光可以传参，其实也可以用来监听一个值的变换做一些相对应的改变（我的理解类似于vue中的watch监听一个值是否发生变化做一些处理）。比如：我要我有个需求一离开首页，其他组件要做一些回应就可以在首页组件卸载生命周期emitter一个事件，在要改变的页面监听一下即可。