vue组件使用name属性来生成递归组件

先来个简单的数据

 1 lists =  [{
 2     id: 1,
 3     title: '第一层',
 4     children: [{
 5             id: 3,
 6             title: '第二层',
 7             children: [{
 8                 id: 4,
 9                 title: 第三层
10             }]
11         }]
12     }，{
13     id: 2,
14     title: '第一层'
15 }]

上面的数据是个很简单的数据，一个数组，嵌套了3层，即id为1为祖，id为3为父，id为4位孙。

创建一个简单的单组件，list.vue，name属性为list

 1 <template>
 2   <div>
 3     <div
 4       class="item"
 5       v-for="(item, index) in lists"
 6       :key="index"
 7     >
 8       <div class="item-title">
 9         {{item.title}}
10       </div>
11       <div v-if="item.children" class="item-children">
12         <!-- 调用自己,将数据传递进去，一定要加判断数据是否存在，以防出bUG -->
13         <!-- 使用组件nama属性list来调用 -->
14         <list :list="item.children"></list>
15       </div>
16     </div>
17   </div>
18 </template>
19
20 <script>
21 export default {
22   // name主要是为了使用递归组件
23   name: 'DetailList',
24   props: {
25     // 数据上方
26     lists： Array
27   }
28 }

渲染结果为：

　　第一层

　　第二层

　　第三层

　　第一层

好像有点难分，给item-children加个padding-left属性,

如padding-left: .2rem

渲染结果大概是：

　　第一层

　　　　第二层

　　　　　　第三层

　　第一层

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