欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于element的表單組件整理筆記

 更新時(shí)間:2021年02月05日 10:28:05   作者:LZPP  
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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ī)則)

async-validator使用

然后在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)

    這篇文章主要介紹了簡(jiǎn)述Vue中容易被忽視的知識(shí)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能

    vue使用自定義指令實(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-09
  • Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法

    Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法

    這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法

    vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法

    這篇文章主要介紹了vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • vue實(shí)現(xiàn)自定義組件掛載原型上

    vue實(shí)現(xiàn)自定義組件掛載原型上

    這篇文章主要介紹了vue實(shí)現(xiàn)自定義組件掛載原型上方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式

    vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式

    這篇文章主要介紹了vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue-Router模式和鉤子的用法

    Vue-Router模式和鉤子的用法

    本篇文章主要介紹了Vue-Router模式和鉤子的用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法

    vue跳轉(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-06
  • 使用webpack搭建vue環(huán)境的教程詳解

    使用webpack搭建vue環(huán)境的教程詳解

    這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過(guò)實(shí)例的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼

    Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下
    2022-12-12

最新評(píng)論