vue組件使用name屬性來生成遞歸組件

先來個簡單的數據

lists =  [{
    id: 1,
    title: '第一層',
    children: [{
            id: 3,
            title: '第二層',
            children: [{
                id: 4,
                title: 第三層
            }]
        }]
    }，{
    id: 2,
    title: '第一層'
}]

上面的數據是個很簡單的數據，一個數組，嵌套了3層，即id為1為祖，id為3為父，id為4位孫。

創建一個簡單的單組件，list.vue，name屬性為list

<template>
  <div>
    <div
      class="item"
      v-for="(item, index) in lists"
      :key="index"
    >
      <div class="item-title">
        {{item.title}}
      </div>
      <div v-if="item.children" class="item-children">
        <!-- 調用自己,將數據傳遞進去，一定要加判斷數據是否存在，以防出bUG -->
        <!-- 使用組件nama屬性list來調用 -->
        <list :list="item.children"></list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // name主要是為了使用遞歸組件
  name: 'DetailList',
  props: {
    // 數據上方
    lists： Array
  }
}

渲染結果為：

　　第一層

　　第二層

　　第三層

　　第一層

好像有點難分，給item-children加個padding-left屬性,

如padding-left: .2rem

渲染結果大概是：

　　第一層

　　　　第二層

　　　　　　第三層

　　第一層

用來做樹型數據的列表往往很好用，節省了代碼。