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 }]

 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 }