Vue实际运用四：递归组件-做树状菜单列表

递归组件

使用场景：Vue的递归组件，组件递归自身实现无限制层级的渲染，适合树状菜单

1.创建文件，作为组件树的入口文件，类似于，一些数据data会在进行一些初始化的操作。

<template>
    <div>
    	//通过自定义属性传递 数据给子组件 
        <TreeMenu :label="" :nodes=""></TreeMenu>
    </div>
</template>

<script>
    import TreeMenu from '../components/'
    export default {
        name:'Tree',
        components:{
            TreeMenu
        },
        data(){
            return{
                treeList:{
                    label:'*',
                    nodes:[
                        {
                            label:'省级',
                            nodes:[{
                                label:'市级'
                            },{
                                label:'地级市'
                            }]
                        },
                        {
                            label:'特区',
                            nodes:[{
                                label:'自治区'
                            },{
                                label:'自治乡'
                            }]
                        }
                    ]
                }
            }
        }
    }
</script>

<style lang="less" scoped>

</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45

AI助手

在入口组件里引入子组件，并且向子组件传递数据label和nodes，这里data先预定义一个简单的对象

作为树形菜单组件，负责递归和数据渲染，它会接受来自入口组件传递来的label和nodes数据，进行渲染，并且继续递归传递nodes和label。

在从父组件接收nodes和label后，先循环渲染TreeMenu组件，然后每一个TreeMenu又会递归自身，所以数据就这样一层层向下传递 nodes=>nodes.node=>

3. 效果