三大前端框架，有哪个框架组件间交互像js的方法传值一样简单?

　　首先框架组件通信是为了方便组件模块之间进行数据交互的，因为框架的开发本就是组件化，模块化开发，讲一个完整的项目分割成不同的组件，view组件，功能组件等等，然后形成一个具有完整功能交互的page，前端三大主流框架无异于vue，react，angular，vue版本分为1.0以及2.0，目前3.0版本正在开发中，react的开发版本无异于15以及16，angular的版本相对来说就比较多，angularjs也就是1，angular2、4、5、6、8等，除了angular1不是组件化开发外，其余均是组件化开发，在不同版本中，组件通讯传值亦是不一样的。

　　在vue中，组件通讯分为嵌套组件，父组件-子组件，子组件-父组件，以及兄弟组件通信，还有多组件集中数据共享。最为常见的这几种传值中，父组件-子组件依赖于绑定属性以及props属性，子组件-父组件依赖于绑定事件，$emit以及回调函数，如果想要直接获得当前父组件以及子组件可以借助ref属性，以及$parent来直接拿到父子对象，进行数据获取。兄弟组件则完全依赖于$emit，$on两个语法进行数据传值。

　　如果组件过多共享数据的情况下，便要使用vuex来进行集中管理。Vue中的通讯相对于js的通讯来说遵循了自己内部的语言规范。对于react框架来说，完全是class对象的开发，继承react声明组件语法对象、无论父子还是子父通讯，都完全依赖于组件对象上进行prop属性的绑定，进行state数据传递，因为在react中数据传递的载体就是prop以及state，所以组件通讯更加依赖于这两个对象。

　　对于多组件的数据集中管理，可以使用redux，flux等工具，流程化管理集中数据，更加方便组件数据的共享。对于angular来说1版本中基本不提供组件化开发，所有数据交互均通过scope对象桥接，在2版本以后，angular引入组件化开发，其父子组件通讯也完全依赖于angular提供的丰富的核心库，借助装饰器input、output，eventemitter中emit方法以及属性式指令配合来完成父子以及子父通讯。

　　总而言之，框架是基于js开发的，形成了自己内部的一种声明规范，组件传值也依赖于自己内部api规范来执行。都是对于js做了二次的封装或者抽象。了解框架的api核心语言，组件传值还是比较容易实现的。

转载于:https://juejin.im/post/5d00c580e51d455a68490b48