您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue中組件遞歸的方法及使用問(wèn)題有哪些”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
1、第一個(gè)問(wèn)題就是,循環(huán)表單;看下圖
然后這里的數(shù)據(jù)返回的是這樣的:
說(shuō)明下數(shù)據(jù)字段的含義:name屬性算是表頭,然后里面的valueType代表的是各種不同輸入框;比方說(shuō)上面的7代表的是普通的下拉框,然后6就是普通的輸入框,1的話是布爾下拉框(其實(shí)在前端這邊1和7是一樣的,但是需要注意點(diǎn)的是Element中的下拉框判斷使用的是雙等于號(hào),意思說(shuō),布爾true等于字符轉(zhuǎn)的false及true=='false'是正確的,所以這里需要格式化);如果等于的是8的話,代表這個(gè)是另一個(gè)子表單。如果有對(duì)應(yīng)的editData字段,并且這里還需要遞歸一次這樣的數(shù)據(jù);
來(lái)看下我的格式化數(shù)據(jù)的過(guò)程:
formatterData(editDataAjax, id) { editDataAjax.map(item => { // 如果是類型8,則需要再次展開數(shù)據(jù) if (item.valueType == 8) { item.editData = []; item.expanded = false; } // 如果是枚舉的類型或者布爾的類型,則需要給他格式化數(shù)據(jù)一下,用來(lái)創(chuàng)建option if (item.valueType == 7 || item.valueType == 1) { item.option = []; for (const key in item.data) { if (item.data.hasOwnProperty(key)) { const element = item.data[key]; if (item.valueType == 1) { // 如果是布爾類型的話,改成布爾 item.option.push({ value: key === "true" ? true : false, label: element }); } else { item.option.push({ value: key, label: element }); } } } } }); }
最后這里需要注意的一點(diǎn)就是,循環(huán)創(chuàng)建輸入框和下拉框的話,需要使用v-model的格式,如果單純的時(shí)候的是:value模式綁定的話,會(huì)有問(wèn)題,需要格外的注意,請(qǐng)看下面的代碼
<template v-if="item.valueType==6"> <div class="inputDom"> <el-input v-model="item['value']" :disabled="item.flag==1?true:false"></el-input> </div> </template>
首先要說(shuō)下遞歸組件怎么使用,就是我的組件文件名叫做fromItem.vue;然后我的name名稱也是fromItem(一定要有name),組件遞歸使用其實(shí)和使用其他的組件是一樣的;需要先引入
import fromItem from './fromItem';
然后注冊(cè)
components: { fromItem },
使用的時(shí)候,也是一樣的
<div class="childDom"> <fromItem :editData="item.editData" /> </div>
但是這個(gè)時(shí)候,我們的數(shù)據(jù)就要發(fā)生相對(duì)應(yīng)的變化:
當(dāng)我們給父級(jí)的editData賦值的時(shí)候,就會(huì)出來(lái)第一層級(jí),讓我們給父級(jí)中任意一個(gè)editData賦值,就會(huì)出現(xiàn)子組件遞歸了。這個(gè)時(shí)候不管有幾層,都會(huì)出現(xiàn)相對(duì)應(yīng)的表單了;
開始的時(shí)候,我把每次請(qǐng)求的數(shù)據(jù)函數(shù)都放在了子組件中進(jìn)行,就是fromItem.vue文件中進(jìn)行,但是這樣的話,每次請(qǐng)求到最新的數(shù)據(jù),如果我不保存上次的數(shù)據(jù)的話,發(fā)現(xiàn)就沒有父表單了,只能出現(xiàn)子表單;如果要是保存的話,我就需要每次請(qǐng)求完成之后,調(diào)用父組件的方法,保存很多數(shù)據(jù)。造成了理解的困難;
所以現(xiàn)在使用的方式就是,子組件文件,也就是fromItem.vue組件,不做任何數(shù)據(jù)的處理,只是接受并且展示數(shù)據(jù);數(shù)據(jù)的請(qǐng)求,整理,和最后的編輯保存都在父組件中完成,這樣的話,就不會(huì)造成數(shù)據(jù)的混亂,畢竟遞歸的時(shí)候,做的越多越容易出錯(cuò);
“Vue中組件遞歸的方法及使用問(wèn)題有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。