以前覺得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