關(guān)于element的表單組件整理筆記
element表單及代碼的展示
詳細(xì)可以看element表單官方網(wǎng)址
結(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ī)則)
然后在item里引入使用
到這里其實(shí)基本就算完成了,為了更好的使用,一般是有一個(gè)提交按鈕,點(diǎn)擊后再進(jìn)行全局校驗(yàn)的
提交功能
父組件:
form子組件:
到這里就算是完成了,感謝大家的觀看,本人只是個(gè)小菜雞,如果大家發(fā)現(xiàn)有什么地方不對(duì)的,請(qǐng)立馬提出你寶貴的意見(jiàn)糾正我,謝謝
總結(jié)
到此這篇關(guān)于關(guān)于element表單組件的文章就介紹到這了,更多相關(guān)element表單組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn)
這篇文章主要介紹了簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
在Vue中,通過(guò)自定義指令v-copy和document.execCommand方法,可以實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長(zhǎng)文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動(dòng)設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧2024-09-09Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法
這篇文章主要介紹了vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式
這篇文章主要介紹了vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法
最近接觸了vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2022-12-12