以前覺得element-ui肯定特別難寫，最近在看組件通信，就試試寫下el-form，當做練習了，這樣以後自己也能試着看懂/開發高階組件。
本文，一步步來，讀者如果有耐心的話，最好也自己手敲一遍。
搭個架子
為了快捷方便，用vue create創建個項目，因為喜歡pug,，裝個npm i pug pug-plain-loader -D
先看看官網，關於el-form使用的demo，然後將重點複製到App.vue，再新建相應的組件文件。
顯示輸入框
觀察App.vue
-
el-form起碼有屬性model和rules，還有個方法validate -
因為
el-form-item寫在其內部，所以也肯定有slot -
同理，
el-form-item起碼有屬性label和prop，和slot -
el-input可以v-model，而v-model是value和input的語法糖
組件相互獲取屬性和事件
輸入的時候，應該要判斷輸入值是不是有效。
輸入是在el-input那邊，驗證是在el-input-item那邊，那麼就需要在el-input調用el-input-item的驗證方法
但是呢，el-input-item必須知道規則和值才能驗證，換言之，需要知道el-form的信息。
先考慮el-input-item怎麼拿到el-form的屬性
這兩，這個demo裏是父子組件的關係，但實際上，不一定，但起碼是 前輩和後代的關係。
之前總結過，vue組件通信方式。
組件內部嵌套層級不確定，後代組件想要祖先組件數據的話，可考慮provide/inject。
再考慮el-input怎麼調用el-input-item的方法
同理，這兩，這個demo裏是父子組件的關係，但實際上，不一定，但起碼是 前輩和後代的關係。
這裏雖然也可用provide，但是可以試試$parent，畢竟一個el-input-item通常只有一個el-input。
$parent很多時候需要用到遞歸，這裏拋磚引玉下。
驗證單個表單元素
這裏引入async-validator，之前寫過一個大概怎麼使用
在el-form-item裏已經知道prop/rule，所以引入之後，就很簡單了，這邊加了一個顯示錯誤信息的屬性。
這樣輸入的時候，能實時驗證。
當用户在App.vue那邊elForm.validate()的時候，el-form裏的validate是對所有表單元素的validate進行了遍歷，如果都是true，那就返回true，否則就是false。
所有表單元素，其實就是el-form-item，綜合組件通信方式，果斷還是用下$children，這裏也一樣要遞歸拿到el-form-item。
至此，el-form的核心思路就完成了，重點是知道各種通信方式的方法和使用思路。
代碼
github的代碼 這邊用分支進行階段操作，需要的話，可以練習下。
- 搭個架子 -
git checkout init - 顯示輸入框 -
git checkout show-input - 拿到el-form實例 -
git checkout provide