如何正確的使用element的表單組件

這篇文章給大家介紹如何正確的使用element的表單組件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

結(jié)構(gòu)、功能分析

通過(guò)介紹以及源碼可以發(fā)現(xiàn)，表單是具有收集、校驗(yàn)、提交數(shù)據(jù)三個(gè)功能的。

他的基本結(jié)構(gòu)如下：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
 <el-form-item label="賬號(hào)" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
</el-form>

通用組件的特點(diǎn)就是：高內(nèi)聚、低耦合，根據(jù)這個(gè)特點(diǎn)，我們所要寫(xiě)的組件就應(yīng)該是一個(gè)模塊負(fù)責(zé)一個(gè)功能（功能單一、提高復(fù)用性），同時(shí)減少他們之間交互帶來(lái)的不良影響。

分析上面源碼的基本結(jié)構(gòu)：

form： :model 與 :rules 分別是用于接受數(shù)據(jù)模型與校驗(yàn)規(guī)則、使用ref屬性進(jìn)行了注冊(cè)，方便后續(xù)操作DOM

item： 通過(guò)prop得到當(dāng)前數(shù)據(jù)的值

input： 雙向綁定管理數(shù)據(jù)

那么就可以得知他們分別負(fù)責(zé)的功能是收集、校驗(yàn)、提交數(shù)據(jù)

那么下面就用我們最常見(jiàn)的登錄注冊(cè)功能來(lái)從小往大開(kāi)始寫(xiě)一遍代碼

input組件實(shí)現(xiàn)

首先明確目標(biāo)：input組件只需要實(shí)現(xiàn)雙向綁定，起到管理數(shù)據(jù)的功能即可

雙向綁定的實(shí)現(xiàn)需要用到v-model，在以往學(xué)習(xí)過(guò)程中，v-model語(yǔ)法糖其實(shí)是可以拆分成v-bing:value、v-on:input兩個(gè)，在綁定數(shù)據(jù)的時(shí)候同時(shí)監(jiān)聽(tīng)事件。

下面粘貼一些代碼截圖，方便下面記錄：

父組件：

子組件：

首先明確Input需要實(shí)現(xiàn)的功能:通過(guò)雙向綁定維護(hù)數(shù)據(jù)

那么只需要搞懂雙向綁定的值與監(jiān)聽(tīng)的事件分別是什么就行。

為了方便管理數(shù)據(jù)，input子組件里綁定的值應(yīng)該是父組件傳進(jìn)來(lái)的值

值得注意的是：在子組件的input事件里，一般是一個(gè)單向數(shù)據(jù)流，那么當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，只需要派生一個(gè)事件給父組件，再通過(guò)監(jiān)聽(tīng)父組件傳進(jìn)來(lái)的值，從而實(shí)現(xiàn)改變數(shù)據(jù)，實(shí)現(xiàn)一個(gè)父?jìng)髯?、子傳父的單向循環(huán)

item組件的實(shí)現(xiàn)

父組件：

子組件：

item子組件需要完成的功能為：校驗(yàn)

我們先寫(xiě)一個(gè)模板，校驗(yàn)功能等到后面再完善

form組件的實(shí)現(xiàn)

父組件：

子組件：

form實(shí)現(xiàn)的功能：接收數(shù)據(jù)和校驗(yàn)規(guī)則

所以需要聲明這兩個(gè)屬性方便接收

基本的框架都完成了，下面就是核心問(wèn)題

核心問(wèn)題

 ①在form里接受的數(shù)據(jù)和規(guī)則，但是需要用的地方卻是在item里，那么我們?cè)趺窗阎祩飨氯ツ?=> provide和inject

雖然目前我們要用到的值只有imformation和rules，但是為了方便，我們傳的值是this,這樣以后就可以通過(guò)this，在子代拿到父代以及更高級(jí)的實(shí)例.

在form組件里加入provide

其他需要用的數(shù)據(jù)的組件里加入inject

使用例子：

②通知校驗(yàn)、進(jìn)行校驗(yàn)

在input組件里派發(fā)一個(gè)事件給自己的父級(jí)item，通知它校驗(yàn)

在item里接收這個(gè)事件并實(shí)現(xiàn)

在validate方法里，首先我們要獲取到校驗(yàn)的規(guī)則和需要被校驗(yàn)的值，那么我們之前通過(guò)provide和inject已經(jīng)把值傳下來(lái)了，現(xiàn)在通過(guò)在item里加一個(gè)prop，這樣就可以通過(guò)prop定位拿到我們想要的值

接下來(lái)我們安裝一個(gè)第三方庫(kù) npm i async-validator -S(可以執(zhí)行很多異步的校驗(yàn)規(guī)則)

async-validator使用

然后在item里引入使用

到這里其實(shí)基本就算完成了，為了更好的使用，一般是有一個(gè)提交按鈕，點(diǎn)擊后再進(jìn)行全局校驗(yàn)的

提交功能

父組件：

form子組件：

關(guān)于如何正確的使用element的表單組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。