el-form中rules的原理简介

一直以来我都没有搞懂el-form的rules究竟是怎么工作的，我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框，只能自己封装了，同时这里用到了rules，没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知！！！

把拉代码吧，还能怎么办呢？

经过艰苦卓绝的一个小时，总算搞懂了。我下面尝试总结一下

当表单元素（比如el-input），在value变化或blur时，会触发el.form.change和el.form.blur到ElFormItem，这是使用emitter.js中的dispatch实现的。ElFormItem就会调用自身的validate方法来做验证。validate方法借助了AsyncValidator，这个是一个第三方包，这里就不讨论了。

AsyncValidator的验证需要我们传入验证规则，ElFormItem怎么获取验证规则的呢？它会综合ElForm上的rules和自己的rules，以及ElFormItem上的required字段生成一个规则数组，这里要说一下ElForm上的ElFormItem上的rules是互斥的，后者的优先级高。

接下来再提一下ElForm.validate的实现，它会调用所有设置了prop的ElFormItem的validate。

如果要实现自己的表单元素，并且支持rules的话，需要在自己的表单组件中emit出el.form.change和el.form.blur事件。

如果有帮助，请点赞哦:)