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

關于element的表單組件整理筆記

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

element表單及代碼的展示

詳細可以看element表單官方網(wǎng)址

結構、功能分析

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

他的基本結構如下:

<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>

通用組件的特點就是:高內(nèi)聚、低耦合,根據(jù)這個特點,我們所要寫的組件就應該是一個模塊負責一個功能(功能單一、提高復用性),同時減少他們之間交互帶來的不良影響。

分析上面源碼的基本結構:

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

item: 通過prop得到當前數(shù)據(jù)的值

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

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

那么下面就用我們最常見的登錄注冊功能來從小往大開始寫一遍代碼

input組件實現(xiàn)

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

雙向綁定的實現(xiàn)需要用到v-model,在以往學習過程中,v-model語法糖其實是可以拆分成v-bing:value、v-on:input兩個,在綁定數(shù)據(jù)的時候同時監(jiān)聽事件。

下面粘貼一些代碼截圖,方便下面記錄:

父組件:

子組件:

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

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

為了方便管理數(shù)據(jù),input子組件里綁定的值應該是父組件傳進來的值

值得注意的是:在子組件的input事件里,一般是一個單向數(shù)據(jù)流,那么當數(shù)據(jù)發(fā)生變化的時候,只需要派生一個事件給父組件,再通過監(jiān)聽父組件傳進來的值,從而實現(xiàn)改變數(shù)據(jù),實現(xiàn)一個父傳子、子傳父的單向循環(huán)

item組件的實現(xiàn)

父組件:

子組件:

item子組件需要完成的功能為:校驗

我們先寫一個模板,校驗功能等到后面再完善

form組件的實現(xiàn)

父組件:

子組件:

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

所以需要聲明這兩個屬性方便接收

基本的框架都完成了,下面就是核心問題

核心問題

 ①在form里接受的數(shù)據(jù)和規(guī)則,但是需要用的地方卻是在item里,那么我們怎么把值傳下去呢 => provide和inject

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

在form組件里加入provide

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

使用例子:

②通知校驗、進行校驗

在input組件里派發(fā)一個事件給自己的父級item,通知它校驗

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

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

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

async-validator使用

然后在item里引入使用


到這里其實基本就算完成了,為了更好的使用,一般是有一個提交按鈕,點擊后再進行全局校驗的

提交功能

父組件:

form子組件:

到這里就算是完成了,感謝大家的觀看,本人只是個小菜雞,如果大家發(fā)現(xiàn)有什么地方不對的,請立馬提出你寶貴的意見糾正我,謝謝

總結

到此這篇關于關于element表單組件的文章就介紹到這了,更多相關element表單組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 簡述Vue中容易被忽視的知識點

    簡述Vue中容易被忽視的知識點

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

    vue使用自定義指令實現(xiàn)一鍵復制功能

    在Vue中,通過自定義指令v-copy和document.execCommand方法,可以實現(xiàn)點擊按鈕復制內(nèi)容到剪貼板的功能,適用于處理長文本或多行文本的復制需求,而readonly屬性可避免內(nèi)容被修改和移動設備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧
    2024-09-09
  • Vue3在router中使用pinia報錯的簡單解決辦法

    Vue3在router中使用pinia報錯的簡單解決辦法

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

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

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

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

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

    vuex?設計思路和實現(xiàn)方式

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

    Vue-Router模式和鉤子的用法

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

    vue跳轉(zhuǎn)到詳情頁的兩種實現(xiàn)方法

    最近接觸了vue項目,下面這篇文章主要給大家介紹了關于vue跳轉(zhuǎn)到詳情頁的兩種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2023-06-06
  • 使用webpack搭建vue環(huán)境的教程詳解

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

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

    Vue后臺實現(xiàn)點擊圖片放大功能的示例代碼

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

最新評論