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

渲染结果大概是：

　　第一层

　　　　第二层

　　　　　　第三层

　　第一层

用来做树型数据的列表往往很好用，节省了代码。