Vue面试之组件间通信

React的基本组件元素是一个个组件,组件之间可能存在关联、组合等关系。不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信。
根据传递的复杂程度,可以分为三种情况:
父子间通信,兄弟间通信,同其他外部库通信。

父子间通信

在学习组件的时候,props是输入,组件是输出。在这里的props,就是父向子传递的数据。而子向父传递数据,则是通过父级传递进来的props中的函数引用,间接的唤起父级处理函数,并传入参数。

在这个例子里,通过调用props上传递进来的处理函数,达到了子向父传递数据的目的。

兄弟间通信

不使用其他库的话,借助React原生API,有两种方法:

通过父组件做中转
借用父组件以外,也可以使用react的Context API
关于Context API,我们还是先翻文档Context。

Context主要是为了处理多个组件可能需要获取同一组数据,例如文档中提到的theme,以及B端系统经常需要获取全局登录态,都可以使用ContextAPI。

在Context中,有两个重要的概念,Provider和Consumer。

Provider提供一个全局的数据源,订阅了它的数据源的Cusumer,不论节点嵌套多深都可以获取到Provider提供的数据。

看一个例子。

点我-CodeSandbox

在一些轻量级的应用中,基本上可以使用ContextAPI解决多级数据共享的问题。当然,如果要更强大,只能用Redux等库了。

关于Redux的使用,会在下一篇详细讲解。

同其他外部库通信

如果一个项目中,既有React,又有jQuery,又有Vue怎么办?怎么解决这种情形下得数据流转?

这是阿里的一道面试题,我那时没有怎么写过React,基本上就是zepto和小程序,面试官没有为难我,提了这样的问题。当时我提出了一种想法,发布订阅加适配器模式。下面简单说一下我的想法。

如果把这个场景抽象一下,可以看做是三种不同的组件需要相互通信,它们对数据的要求不一样,数据格式不同,但是一旦数据打到各自的组件内,其实数据流就不需要我们关心了。

所以可以维护一个公共的数据集市,所有人都从数据集市里取数据,也向数据集市中发数据,数据集市是一个公开的发布者,各组件为订阅者。

数据集市承担了适配的工作,对各个组件传进来的数据统一保存,在取数据时,根据组件的类型不同,派发不同形式的组件,这样,基本上就将组件间通信提升至了一个统一的数据集市,避免了组件的之间一对一通信。

当然,这和flux的思想也很类似,统一数据源,统一分发,只和数据源交互,避免了多个组件间复杂通讯带来的数据流混乱。
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 1 )
最新评论
aqingxin 10 天前 1F

为什么标题是Vue的,而内容是react的