四十五、Vue之递归组件

一、递归组件的实现效果

二、递归组件的实现效果

数据：

list: [{
                title: '成人票',
                children: [{
                    title: '成人三馆联票',
                    children: [{
                        title: '成人三馆联票---某一连锁店'
                    }]
                },{
                    title: '成人五馆联票'
                }]
            },{
                title: '学生票'
            },{
                title: '儿童票'
            },{
                title: '特惠票'
            }]

<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属性主要用于递归组件
    name: "DetailList",
    props: {
        list: Array
    }
}
</script>
<style lang="stylus" scoped>
    .item-title
        line-height .8rem
        font-size .32rem
        text-align left
        padding 0 .2rem
        .item-title-icon
            position relative
            left .06rem
            top .06rem
            display inline-block
            width .36rem
            height .36rem
            background url('//s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.45rem no-repeat;
            margin-right .1rem
            background-size .4rem 3rem
    .item-children
        padding 0 .2rem
</style>

简言之，就是自己调用自己，注意传值！