通俗的讲，组件内部再调用自身就是递归组件
一般情况下，递归组件的使用时因为要渲染的数据存在多个层级，例如
data(){
return {
list:[{
title:"成人票",
children:[{
title:"成人三馆联票"
},{
title:"成人五馆联票",
children:[{
title:"成人五馆联票--某一连锁店销售"
}]
}]
},{
title:"学生票"
},{
title:"儿童票"
},{
title:"特惠票"
}]
}
}
正常的组件使用是下边这样(这个例子组件是接收的父组件传来的list数据)
<template>
<div>
<div class="item"
v-for="(item,index) of list "
:key="index"
>
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
</div>
</div>
</template>
显示效果是这样的
image.png
但是当我们需要显示二级甚至三级标题的时候，就需要用到递归组件
<template>
<div>
<div class="item"
v-for="(item,index) of list "
:key="index"
>
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
//当item存在children的时候，再次调用detail-list(组件的name),并把数据item.children传给组件
<div v-if="item.children" class="item-children">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
显示效果如下（样式自己调整）
image.png
