递归组件的使用

注意点

• 需要一个中止条件来中止递归组件
• 递归组件需要命名 后才能使用
• index 不能重复
• 分清循环的是 parent 还是 parent.children

实现例子-多级子菜单

• menu_page 视图
• a-menu 顶级菜单组件
• a-menu-item 菜单项组件
• a-submenu 子菜单组件
• re-submenu 递归组件

递归组件

<template>
    <a-sub-menu>
        <div slot="title">{{ parent.title }}</div>
        <template v-for="( item, i) in parent.children">
            <a-menu-item v-if="!item.children" :key="`menu_item_${index}_${i}`"> {{ item.title }}</a-menu-item>
            <re-submenu v-else :key="`menu_item_${index}_${i}`" :parent="item" ></re-submenu>
        </template>
    </a-sub-menu>
</template>
<script>
    import menuComponents from '_c/menu'
    const { AMenuItem, ASubMenu } = menuComponents
    export default {
        name: 'ReSubmenu',
        components: {
            AMenuItem,
            ASubMenu
        },
        props: {
            parent: {
                type: Object,
                default: () => ({})
            },
            index: Number
        }
    }
</script>

menu_page 视图

<template>
    <div class="menu-box">
<!--        <a-menu>-->
<!--            <a-menu-item>111</a-menu-item>-->
<!--            <a-menu-item>222</a-menu-item>-->
<!--            <a-sub-menu>-->
<!--                <div slot="title">333</div>-->
<!--                <a-menu-item>333-11</a-menu-item>-->
<!--                <a-sub-menu>-->
<!--                    <div slot="title">333-22</div>-->
<!--                    <a-menu-item>333-22-11</a-menu-item>-->
<!--                    <a-menu-item>333-22-22</a-menu-item>-->
<!--                </a-sub-menu>-->
<!--            </a-sub-menu>-->
<!--        </a-menu>-->
        <a-menu>
            <template v-for="(item, index) in list">
                <a-menu-item v-if="!item.children" :key="`menu_item_${index}`"> {{ item.title }} </a-menu-item>
                <re-submenu v-else :key="`menu_item_${index}`" :parent="item" :index="index"></re-submenu>
            </template>
        </a-menu>
    </div>
</template>
<script>
    import menuConponents from '_c/menu'
    import reSubmenu from './re-submenu'
    const { AMenu, AMenuItem, ASubMenu } = menuConponents
    export default {
        name: 'menu_page',
        components: {
            AMenu,
            AMenuItem,
            ASubMenu,
            reSubmenu
        },
        data () {
            return {
                list: [
                    {
                        title: '1111'
                    },
                    {
                        title: '2222'
                    },
                    {
                        title:  '3333',
                        children:   [
                            {
                                title:  '3333-1'
                            },
                            {
                                title: '3333-2',
                                children:   [
                                    {
                                        title:  '3333-2-1'
                                    },
                                    {
                                        title:  '3333-2-2'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>
<style lang="less">
    .menu-box{
        width: 300px;
        height: 400px;
    }
</style>

a-menu

<template>
    <div class="a-menu">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: 'AMenu'
    }
</script>
<style lang="less">
    .a-menu{
        & *{
            list-style: none;
        }
        ul{
            padding: 0;
            margin: 0;
        }
    }
</style>

a-menu-item

<template>
    <li class="a-menu-item">
        <slot></slot>
    </li>
</template>
<script>
    export default {
        name: 'AMenuItem'
    }
</script>
<style lang="less">
    .a-menu-item{
        background: pink;
    }
</style>

a-sub-menu

<template>
    <ul class="a-submenu">
        <div class="a-submenu-title" @click="handleClick">
            <slot name="title"></slot>
            <span class="shrink-icon" :style="{ transform: `rotateZ(${showChild ? 0 : 180 }deg)`}">^</span>
        </div>
        <div v-show="showChild" class="a-submenu-child-box">
            <slot></slot>
        </div>
    </ul>
</template>
<script>
    export default {
        name: 'ASubMenu',
        data () {
            return {
                showChild: false
            }
        },
        methods: {
            handleClick () {
                this.showChild = !this.showChild
            }
        }
    }
</script>
<style lang="less">
    .a-submenu{
        background: #42b983;
        &-title{
            color: #fff;
            position: relative;
            .shrink-icon{
                position: absolute;
                top: 4px;
                right: 10px;
            }
        }
        &-child-box{
            overflow: hidden;
            padding-left: 40px;
        }
        li{
            background: #42b983;
        }
    }

</style>