先來(lái)說(shuō)下需求，就是一個(gè)表單，會(huì)有樹(shù)形結(jié)構(gòu)一樣，會(huì)有子表單，表單顯示什么內(nèi)容是后臺(tái)通過(guò)接口數(shù)據(jù)來(lái)確定的；這個(gè)時(shí)候就和樹(shù)形結(jié)構(gòu)一樣，肯定會(huì)有子組件的遞歸；這次是自己第一次寫遞歸，遇到了三個(gè)問(wèn)題記錄下；

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，則需要再次展開(kāi)數(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>

2、遞歸組件的使用

　　首先要說(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)的表單了；

3、關(guān)于數(shù)據(jù)的整理和構(gòu)建

　　開(kāi)始的時(shí)候，我把每次請(qǐng)求的數(shù)據(jù)函數(shù)都放在了子組件中進(jìn)行，就是fromItem.vue文件中進(jìn)行，但是這樣的話，每次請(qǐng)求到最新的數(shù)據(jù)，如果我不保存上次的數(shù)據(jù)的話，發(fā)現(xiàn)就沒(méi)有父表單了，只能出現(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ò)；

到此這篇關(guān)于Vue中組件的遞歸的文章就介紹到這了,更多相關(guān)vue組件遞歸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！