解读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给功能做了许多封装,每一部分的代码量虽然不多,但是叠加在一起却十分庞大。如果你没有明确的思路,很容易看着看着就不知道自己到底想要干嘛了。

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

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

相关推荐
Sun_light7 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子9 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00009 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心10 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm14 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v18 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠20 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue22 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷26 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016128 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js