Element表单的校验实现
Form表单在我们前端开发应用时，应该是用的最多的组件之一，不管是登录界面，还是表格界面，都几乎需要应用到Form组件。今天我们就来学习一下一款伟大的UI框架---ElementUI的Form组件。
首先，在Form组件中，elm实现了Form组件与FormItem组件的双向绑定，也就是说，在Form组件中可以访问到每一个FormItem组件的实例对象，同理，每一个FormItem也可以访问到Form组件的实例对象。（如何实现？）
1）组件之间相互通信
Form组件中获取FormItem组件实例
Form组件在created生命周期中在自身的实例对象上绑定了两个事件（el.form.addField和el.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执行他们自身实例上的removeValidateEvents和addValidateEvents方法。
removeValidateEvents方法主要用于移除当前组件实例上的所有时间监听器
FormItem上的validate方法
validate方法应该是我们关注的重中之重，参数中的callback用于给父元素使用，FormItem在校验完成之后，会把信息当成参数传递给callback函数，而Form组件就可以通过callback函数获取到校验的结果。然后FormItem根据验证的结果和vue的双向绑定原理，可以在页面上实时显现。父元素获取到结果后，如果你传入了一个回调函数作为Form中的validate方法参数，那么你传入的函数就会在表单校验结束之后执行，如果你传入的不是回调函数，那么elm会帮你封装一个promise函数，然后再把promise函数带上校验的结果返回。
结语
以上就是我对ElementUI中Form组件的大概理解。在一开始阅读源码时，我也很迷茫，不知从何看起，加上elm给功能做了许多封装，每一部分的代码量虽然不多，但是叠加在一起却十分庞大。如果你没有明确的思路，很容易看着看着就不知道自己到底想要干嘛了。
因此，我的建议是，如果你想上手一个庞大的项目（不管是阅读别人优秀的源码，还是因为工作），你都可以先从一个小的组件或者是一个小的功能模块开始看起，拿着该项目对应的文档或者资料，专门盯着那一个你关心的功能去理解。当你理解了那一个模块的工作原理后，你就对该项目有了一个大体的认知，上手项目也就不再那么困难了（在此特别感谢我的领导浪哥，在理解源码的时候，他给我提供了许多帮助并且指导我主动思想了难点，希望大家在以后的代码之路上也能遇到带领自己前行的人）
如果以上的内容有不对之处，欢迎在评论区留言指正，期待与大家共同进步！