Vue组件递归

前言

最近看项目发现了在菜单展示上面用到了组件的递归，跟函数递归类似，就是组件内部调用自己。

实现

用途
组件递归一般会用到像菜单这样的树形结构，不确定层级时可以通过组件递归实现。

实例

使用页面

<template>
    <div>
        <my-tree :menu-data="menuData"></my-tree>
    </div>
</template>

<script>
import myTree from './recursion.vue';
export default {
    components: {
        myTree
    },
    data() {
        return {
            menuData: [
                {
                    text: '1',
                    children: [
                        {
                            text: '1-2',
                            children: []
                        }
                    ]

                },
                {
                    text: '2',
                    children: []
                }
            ]
        };
    },
    methods: {

    }
};
</script>

<style scoped lang="scss">

</style>

组件

<template>
    <ul>
        <li v-for="(item,index) in menuData" :key="index">
            <div>{{ item.text }}</div>
            <my-tree v-if="item.children.length>0" :menu-data="item.children"></my-tree>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'myTree',
    props: {
        menuData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
        };
    },
    methods: {

    }
};
</script>

效果

注意点

• 组件内部要给组件加上name这个属性，否则无法自己调用自己
• 循环层级时要循环props属性，v-for="(item,index) in menuData" :key="index"