递归组件

思路：1.组件有name来调用 ，2. 树形结构的数据

这个组件单独出来，不然如果有其他内容  ，递归时会重复不必要的内容 。

<div
    class="item"
    v-for="(item, index) of categoryList"
    :key="index"
>
    <div class="item-title">
      <span class="item-title-icon"></span>
      {{item.title}}
    </div>
    <div class="item-title-children" v-if="item.children">  //判断是否有数据中是否有 children 这个属性，如果有就使用递归组件
      <detail-list :categoryList="item.children"></detail-list>     //把 children 传给递归组件
    </div>
 </div>

注释的地方就是关键实现点

"categoryList": [{
            "title": "成人票",
            "children": [{
                "title": "成人三馆联票",
                "children": [{
                    "title": "成人三馆联票 - 某一销售店"
                }]
            }, {
                "title": "成人五馆联票"
            }]
        }, {
            "title": "儿童票"
        }, {
            "title": "学生票"
        }, {
            "title": "特惠票"
        }]

数据结构示例

 

来源：https://my.oschina.net/u/560237/blog/3132673