關于element表單組件的筆記
- element表單及代碼的展示
- 結構、功能分析
- input組件實作
- item組件的實作
- form組件的實作
- 核心問題
- ①在form里接受的資料和規則，但是需要用的地方卻是在item里，那么我們怎么把值傳下去呢 => **provide和inject**
- ②通知校驗、進行校驗
- 提交功能
element表單及代碼的展示
詳細可以看element表單官方網址
結構、功能分析
通過介紹以及原始碼可以發現，表單是具有收集、校驗、提交資料三個功能的，
他的基本結構如下：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="賬號" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
通用組件的特點就是：高內聚、低耦合，根據這個特點，我們所要寫的組件就應該是一個模塊負責一個功能（功能單一、提高復用性），同時減少他們之間互動帶來的不良影響，
分析上面原始碼的基本結構：
form： :model 與 :rules 分別是用于接受資料模型與校驗規則、使用ref屬性進行了注冊，方便后續操作DOM
item： 通過prop得到當前資料的值
input： 雙向系結管理資料
那么就可以得知他們分別負責的功能是收集、校驗、提交資料
那么下面就用我們最常見的登錄注冊功能來從小往大開始寫一遍代碼
input組件實作
首先明確目標：input組件只需要實作雙向系結，起到管理資料的功能即可
雙向系結的實作需要用到v-model，在以往學習程序中，v-model語法糖其實是可以拆分成v-bing:value、v-on:input兩個，在系結資料的時候同時監聽事件，
下面粘貼一些代碼截圖，方便下面記錄：
父組件：
子組件：
首先明確Input需要實作的功能:通過雙向系結維護資料
那么只需要搞懂雙向系結的值與監聽的事件分別是什么就行，
為了方便管理資料，input子組件里系結的值應該是父組件傳進來的值
值得注意的是：在子組件的input事件里，一般是一個單向資料流，那么當資料發生變化的時候，只需要派生一個事件給父組件，再通過監聽父組件傳進來的值，從而實作改變資料，實作一個父傳子、子傳父的單向回圈
item組件的實作
父組件：
子組件：
item子組件需要完成的功能為：校驗
我們先寫一個模板，校驗功能等到后面再完善
form組件的實作
父組件：
子組件：
form實作的功能：接收資料和校驗規則
所以需要宣告這兩個屬性方便接收
基本的框架都完成了，下面就是核心問題
核心問題
①在form里接受的資料和規則，但是需要用的地方卻是在item里，那么我們怎么把值傳下去呢 => provide和inject
雖然目前我們要用到的值只有imformation和rules，但是為了方便，我們傳的值是this,這樣以后就可以通過this，在子代拿到父代以及更高級的實體.
在form組件里加入provide
其他需要用的資料的組件里加入inject
使用例子：
②通知校驗、進行校驗
在input組件里派發一個事件給自己的父級item，通知它校驗
在item里接收這個事件并實作
在validate方法里，首先我們要獲取到校驗的規則和需要被校驗的值，那么我們之前通過provide和inject已經把值傳下來了，現在通過在item里加一個prop，這樣就可以通過prop定位拿到我們想要的值
接下來我們安裝一個第三方庫 npm i async-validator -S(可以執行很多異步的校驗規則)
async-validator使用
然后在item里引入使用
到這里其實基本就算完成了，為了更好的使用，一般是有一個提交按鈕，點擊后再進行全域校驗的
提交功能
父組件：
form子組件：
到這里就算是完成了，感謝大家的觀看，本人只是個小菜雞，如果大家發現有什么地方不對的，請立馬提出你寶貴的意見糾正我，謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255920.html
標籤：其他
上一篇：前端工程化的理解