如下图所以，我们想要显示一个详细的票务信息列表，这些信息有明显的层级关系。

票务详情页

detail.json格式如下，我们发现在categoryList的数据是按层级划分的，每层数据包括title和children两部分。

{
  "ret": true,
  "data": {
    "sightName": "大连圣亚海洋世界(AAAA景区)",
    "bannerImg": "http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg",
    "gallaryImgs": ["http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg", "http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png"],
    "categoryList": [{
        "title": "成人票",
        "children": [{
          "title": "成人三馆联票",
          "children": [{
            "title": "成人三馆联票 - 某一连锁店销售"
          }]
        },{
          "title": "成人五馆联票"
        }]
      }, {
        "title": "学生票"
      }, {
        "title": "儿童票"
      }, {
        "title": "特惠票"
      }]
  }
}

我们可以一层层地对数据进行展示，但这样编写代码无疑是费时费力的。通过观察数据格式，我们不难发现，其实可以考虑用递归的方式来进行数据读取和展示。
因此我们新建一个List.vue，来进行递归组件的编写。

<template>
    <div>list</div>
</template>

<script>
export default{
    name: "DetailList",
</script>

<style scoped="">
</style>

并在父级组件Detail.vue中引入和注册List.vue组件。并将在detail.vue中通过axios读取到的数据categoryList传入<detail-list>

<template>
    <div>
        <div class="content">
            <detail-list :list="categoryList"></detail-list>
        </div>
    </div>
</template>

<script>
import DetailList from './components/List'
export default{
    components:{
        DetailList,
    },
}
</script>

在List.vue中要对读取到的数据进行接收。

<script>
export default{
    name: "DetailList",
    props: {
        list:Array
    }
}
</script>

完善List.vue代码，实现递归组件的使用。建议重点看一下<template>部分的代码。

• <template>中最外层首先是一个循环，循环展示List中的每部分数据（item），每个循环分为两部分，一部分显示item.title，一部分显示item.children。
• <template>中展示item.children的部分使用的就是<detail-list>递归组件，当item.children不为空时进行调用（层级关系仍旧存在），并把item.children当做新的list传入<detail-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 v-if="item.children" class="item-children">
                <!-- 递归循环 -->
                <detail-list :list="item.children"></detail-list> 
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name: "DetailList",
    props: {
        list:Array
    }
}
</script>

<style scoped="">
    .item-title {
        line-height: .8rem;
        font-size:.32rem;
        padding: 0 .2rem;
        text-align: left;
    }
    .item-title-icon{
        display: inline-block;
        position: relative;
        width: .36rem;
        height: .36rem;
        top: .06rem;
        left: .06rem;
        background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.9rem no-repeat;
        margin-right: .1rem;
        background-size: .4rem 3rem;
    }
    .item-children{
        padding: 0 0 0 .2rem;
    }
</style>

至此，使用递归组件实现详情页列表完成。