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事件。

如果有幫助，請點贊哦:)