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

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

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

相关推荐
fury_1233 分钟前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023376 分钟前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦17 分钟前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir31 分钟前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
peachSoda71 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH2 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390412 小时前
flutter 仿商场_首页
前端
少卿2 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>2 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript