React & Vue组件间数据传递方式

       React和Vue是两个某些方面的都非常相似的框架，在组件间数据通讯思路也基本相似，下面我主要讲讲二者在父子组件间通信、非父子组件间的通讯、以及父组件向下数据广播等几个方面讲讲如何实现组件中的数据通讯，当然二者现在都用对应的状管理的库，像vue的Vuex,React的Mobx和Redux都是比较好的状态管理方案。若是项目本身不是较复杂且全局公用的参数很少的话，建议没必要引入状态管理方案，直接利用框架现有的通讯方式去处理数据的通讯。

单向数据流，首先大家得明白React和Vue父子组件间都是单向数据流的.(即父组件往子组件传递数据，但是子组件修改这个数据不会造成父组件传递的这个数据的改变，注：Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能，但是在Vue2中已经废弃了此功能)

1、父子组件中通信，react和vue的方式几乎完全一样，都是通过props向子组件传递数据，较简单。具体可查看官方文档。

2、事件广播（父组件的某个数据向下广播，下面的子组件都可以接收）

vue1.x

在vue1.x中父组件通过broadcast来实现向下所有的子组件传递数据，而子组件可以通过dispatch层层向上向各父组件传递数据。子组件通过dispatch事件冒泡沿着各级父组件层层向上传递数据。(broadcast和dispatch已经在vue2.x中被废除了，vue2.x版本推荐使用中央事件总线$emit、$on)基本使用如下：

子组件在事件中触发的方法（methods选项中）中通过$.dispatch（“和父组件对接的自定义名称”，需要传递的数据）向上传给需要接收的父组件，需要接收的父组件在events选项中监听约定好的自定义的对接名称（图中为“child-msg”）,这个回调函数中传入的实参即为子组件传递来的数据。broadcast的使用方式同理。

Vue 2.x

vue2.0里面已经废除了broadcast、dispatch，替代方案官方推荐vuex或者全局事件驱动，若果使用场景不复杂的话，vue2.0里面非父子组件的通信（包含隔代从属关系）推荐使用一个空的 Vue 实例作为中央事件总线（$emit/$on）去实现数据的传递。这一块官网上并没有做很清晰的解释，自己摸索时可能会犯点小错，其实很简单，下面我就讲我写的代码粘贴出来供大家参考：

代码

基本思路：①创建一个bus.js文件，在里面输出一个空的vue的实例，作为中央事件总线（也可以不用单独创立一个文件）
                  ②在触发数据改变的组件中引入bus.js中创建的实例，并在相应的事件处理程序中bus.$emit（‘名字’，传递的数据）去触发数据传递
                  ③在监听数据的组件中引入bus.js中创建的实例，在created选项中bus.$on('名字'，function（传递的数据）{// 传回数据相应的处理})监听传来的数据，在回调函数中进行相应的处理。

React

react中也有类似的父组件向所有的子组件传递数据的方式，若在使用场景不太复杂的情况下也可以使用。下面代码仅以ES6的方式去展示代码的书写。下图代码组件的层级关系为One -----> Three ------->Four，代码实现在Four组件中直接使用One组件中的state。

React中向所有子组件传递数据

基本思路：①在顶层父组件中使用childContextTypes去指定传入值的要求，和父子组件间定义props一样。在getChildContext方法 中return出你要向下传递state。
                  ②在需要接收父组件传递的数据的子组件中使用contextTypes指定值的要求，在子组件代码中直接使用“ this.context.名称 ”即可使用这个值。