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

2019-06-12  本文已影响0人  Eric_V

  首先框架组件通信是为了方便组件模块之间进行数据交互的,因为框架的开发本就是组件化,模块化开发,讲一个完整的项目分割成不同的组件,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核心语言,组件传值还是比较容易实现的。

上一篇下一篇

猜你喜欢

热点阅读