Vue框架下组件递归实现：树形结构展示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42342065/article/details/120097777

前言：
在使用vue框架进行开发的时候可能会使用到组件的递归，比如常见的树形结构。
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>组件的递归：属性目录</title>
        <style>
            [v-cloak]{
                display: none;
            }
            .tree-row{
                width: 100%;
                height: auto;
                box-sizing: border-box;
                border-top: 1px solid #efefef;
                border-bottom: 1px solid #efefef;
                font-size: 14px;
                overflow: hidden;
                padding-top: 10px;
                padding-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            //子组件
            let TreeComponent={
                name:'tree-component',//组件的递归名称(组件递归必须的属性)
                props:{
                    data:Array,
                    //level表示第基层，0表示第一层，1表示第二层(组件递归必须的属性)
                    level:{
                        type:Number,
                        default:0
                    }
                },
                template:`
                    <div>
                        <div class="tree-row" v-for="(item,index) in data" :key="index">
                            <span :style="{'padding-left':level*20+'px'}">{{item.title}}</span>
                            <tree-component :level="level+1" v-if="item.children && item.children.length > 0" :data="item.children"></tree-component>
                        </div>
                    </div>
                `
            };
            //父组件
            new Vue({
                el:"#app",
                data(){
                    return{
                        classify:[
                            {
                                title:'数码',
                                children:[
                                    {
                                        title:'手机',
                                        children:[
                                            {
                                                title:'华为手机'
                                            },
                                            {
                                                title:'苹果手机'
                                            }
                                        ]
                                    },{
                                        title:'电脑'
                                    }
                                ]
                            },
                            {
                                title:'家电',
                                children:[
                                    {
                                        title:'大家电'
                                    },
                                    {
                                        title:'生活电器'
                                    },
                                    {
                                        title:'家电服务'
                                    }
                                ]
                            }
                        ]
                    }
                },
                components:{
                    TreeComponent
                },
                template:`
                    <div>
                        <tree-Component :data="classify"></tree-Component>
                    </div>
                `
            });
        </script>
    </body>
</html>