父子兄弟组件传参交互 vue vs react

ps：忽略全局数据组织方案如vuex和redux等

round 1: 父子爷孙传参

首先上场的使我们的vue，国人开源界骄傲尤雨溪的亲儿子。以简单易上手api丰富而著称，

1. props：父 => 子： props， 子 =>父：props，爷孙：通过父来连接
   通过props像子元素传值，原则上子元素不可以修改props的值，但是传递的props为引用值时，子元素修改也会反映到父元素，用起来方便得很，非常适用于树形组件结构

2. props + $emit ： 父 => 子： props，子 => 父 ：$emit， 爷孙：通过父来连接。
   如果props是非引用类型，就可以使用emit来改变父元素传递的数据了

3. props + 函数：父 => 子：props，子 => 父：props传递的函数，爷孙: 通过父来连接
   通过props向子组件传递一个修改父组件数据的函数，来改变父组件

4. $parent, $chindren：父 => 子：$children，子 => 父：$parent，爷孙：$parent.$parent和$children[0].$children...
   vue实例注入了$parent 和 、$children 引用，指向父子，用起来也很方便

5. event bus ：父 => 子: event bus ，子 => 父：event bus，爷孙： event bus。
   定义一个单独的vue文件，作为事件传播器，用起来很方便，父子兄弟都可以共同使用

6. provide,inject：父 => 子：inject，子 => 父：可以使用props的所有子 => 父方法，爷孙：inject
   多层级传递数据，如果不向上传递数据使用起来还是蛮方便

7. $attr, $listeners：父 => 子：$attr, $listener，子 => 父：可以使用props的所有子 => 父方法，爷孙：$attr, $listener
   使用较少，文档说在创建高级别的组件时非常有用。

8. $refs：父 => 子：$refs，子 => 父：可以使用props的所有子 => 父方法，爷孙：$refs
   使用较为方便，完美获取子组件所有方法。

其次上场的是我们久负盛名的react，函数式，支持typescript，灵活小巧无一不让前端开发者们欢呼呐喊

1. props：父 => 子：props，子 => 父：props传递的函数，爷孙：通过父来连接
   和vue的第三种一样，
2. props 传递组件：父 => 子：在父组件中随便给传递的组件赋值，子 => 父：通过赋值的函数，爷孙： 通过父来传递props组件
3. render props：与第二个同理
4. context：与vue provide inject类似，
5. ref: 与vue $refs用法类似。
6. event bus: 与vue 用法类似

vue 略胜一筹

round 2：兄弟组件传参

这次让react先上场吧，为了公平，毕竟第一回合输了

1. 通过共同的祖先传递参数： 父组件，context等，
2. event bus：通过共同的朋友传递参数...
   总之就是通过别人传递

接下来看看vue有没有什么好的表现

1. 通过共同的祖先传递参数： 父组件，provide，attr等，
2. event bus：通过共同的朋友传递参数...
   总之也是通过别人传递

打平，，没啥好办法

总结

通过以上对决，我们能够看出，组件间传递数据两者方法都很像，唯一的区别就是vue提供了更多的api来方便我们的使用，而react很函数式，组件都能传来传去....使得react的写法异常灵活。。

本场pk结束！