解读ElementUI表单组件

Element表单的校验实现

Form表单在我们前端开发应用时,应该是用的最多的组件之一,不管是登录界面,还是表格界面,都几乎需要应用到Form组件。今天我们就来学习一下一款伟大的UI框架---ElementUI的Form组件。

首先,在Form组件中,elm实现了Form组件与FormItem组件的双向绑定,也就是说,在Form组件中可以访问到每一个FormItem组件的实例对象,同理,每一个FormItem也可以访问到Form组件的实例对象。(如何实现?)

1)组件之间相互通信

Form组件中获取FormItem组件实例

Form组件在created生命周期中在自身的实例对象上绑定了两个事件(el.form.addFieldel.form.removeField),主要用于往data属性中的fields数组中添加或者删除FormItem组件实例 而FormItem组件则在mounted生命周期中,触发了自定义的dispatch事件,从而找到对应的Form组件,然后执行$emit,使得Form组件上绑定的事件得以执行(这里我们可以去着重了解一下父子组件的生命周期的执行顺序,父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted)

对于封装的dispatch函数,主要是为了防止Form组件与FormItem组件中有多重嵌套的情况

从elm实现的dispatch函数中我们可以发现,通过不断循环判断父组件上的componentName属性,不管Form组件与FormItem组件中间嵌套多少层,我们都可以找到对应的Form组件

FormItem组件中获取Form组件实例

在这里,elm采取了依赖注入的方法(这里是官方文档,cn.vuejs.org/guide/compo... 主要就是通过provide和inject来实现数据的注入。

2)校验功能的实现

在一开始,Form组件监听了传入的rules规则,一旦传入了rules规则,立马遍历FormItem对象数组,让每一个FormItem执行他们自身实例上的removeValidateEventsaddValidateEvents方法。

removeValidateEvents方法主要用于移除当前组件实例上的所有时间监听器

FormItem上的validate方法

validate方法应该是我们关注的重中之重,参数中的callback用于给父元素使用,FormItem在校验完成之后,会把信息当成参数传递给callback函数,而Form组件就可以通过callback函数获取到校验的结果。然后FormItem根据验证的结果和vue的双向绑定原理,可以在页面上实时显现。父元素获取到结果后,如果你传入了一个回调函数作为Form中的validate方法参数,那么你传入的函数就会在表单校验结束之后执行,如果你传入的不是回调函数,那么elm会帮你封装一个promise函数,然后再把promise函数带上校验的结果返回。

结语

以上就是我对ElementUI中Form组件的大概理解。在一开始阅读源码时,我也很迷茫,不知从何看起,加上elm给功能做了许多封装,每一部分的代码量虽然不多,但是叠加在一起却十分庞大。如果你没有明确的思路,很容易看着看着就不知道自己到底想要干嘛了。

因此,我的建议是,如果你想上手一个庞大的项目(不管是阅读别人优秀的源码,还是因为工作),你都可以先从一个小的组件或者是一个小的功能模块开始看起,拿着该项目对应的文档或者资料,专门盯着那一个你关心的功能去理解。当你理解了那一个模块的工作原理后,你就对该项目有了一个大体的认知,上手项目也就不再那么困难了(在此特别感谢我的领导浪哥,在理解源码的时候,他给我提供了许多帮助并且指导我主动思想了难点,希望大家在以后的代码之路上也能遇到带领自己前行的人)

如果以上的内容有不对之处,欢迎在评论区留言指正,期待与大家共同进步!

相关推荐
独立开阀者_FwtCoder7 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->18 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~19 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo21 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末39 分钟前
React——基础
前端·react.js·前端框架
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端