好程序员web前端教程分享三大前端框架相关问题

最新推荐文章于 2024-09-15 23:59:26 发布

cique2620

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量58

点赞数

文章标签：前端前端框架 javascript ViewUI

　　好程序员 web 前端教程分享三大前端框架相关问题，三大前端框架，有没有哪个框架的组件间交互像 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 方法以及属性式指令配合来完成父子以及子父通讯。