vue递归组件

| vue

用vue写后台管理系统侧边栏时,用到了递归组件的问题，有的侧边栏导航可能有多个下级分类，结合element来写的一个递归组件小例子

父组件 index.vue

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
       <recursive  :list='trees'></recursive>
</template>
<script>
import recursive from './recursive'
export default {
    components: {
        recursive
    },
    data(){
        return {
            trees: [
                    {
                        id:1,
                        label:"1级目录1",
                        show:true,
                        children:[
                            {
                                id:"1-1",
                                label:"1.1目录"
                            },
                            {
                                id:"1-2",
                                label:"1.2目录"
                            },
                            {
                                id:"1-3",
                                label:"1.3目录"
                            },
                        ]
                    },
                    {
                        id:2,
                        label:"1级目录2",
                        show:true
                    },
                    {
                        id:3,
                        label:"1级目录3",
                        show:true,
                        children:[
                            {
                                id:"3-1",
                                label:"3.1目录"
                            },
                            {
                                id:"3-2",
                                label:"3.2目录",
                                show:false,
                                children:[
                                    {
                                        id:"3-2-1",
                                        label:"3.2.1目录"
                                    },
                                    {
                                        id:"3-2-2",
                                        label:"3.2.2目录"
                                    },
                                    {
                                        id:"3-2-3",
                                        label:"3.2.3目录"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id:4,
                        label:"1级目录4",
                        show:true,
                        children:[
                            {
                                id:"4-1",
                                label:"4.1目录"
                            },
                            {
                                id:"4-2",
                                label:"4.2目录",
                                show:true,
                                children:[
                                    {
                                        id:"4-2-1",
                                        label:"4.2.1目录"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id:5,
                        label:"1级目录5",
                        show:true,
                        children:[
                            {
                                id:"5-1",
                                label:"5.1目录",
                                show:true,
                                children:[
                                    {
                                        id:"5-1-1",
                                        label:"5.1.1目录"
                                    },
                                    {
                                        id:"5-1-2",
                                        label:"5.1.2目录",
                                        show:true,
                                        children:[
                                            {
                                                id:"5-1-2-1",
                                                label:"5.1.2.1目录"
                                            },
                                        ]
                                    }
                                ]
                            },
                            {
                                id:"5-2",
                                label:"5.2目录",
                                show:false
                            }
                        ]
                    },
                ]
        }
    }
}
</script>

子组件 recursive.vue

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
<template>
 <ul>
     <li  v-for='ele in list' :key='ele.id'>
        <span>{{ele.id}}</span>
        <!-- 有条件判断，不会无限循环，:list接收 调用组件别人传入的值 -->
        <side-item :list='ele.children' v-if="hasChildren(ele.children)"></side-item>
     </li>
 </ul>
</template>
<script>
export default {
    name:'SideItem',
    props:{
        list:{
             type:Array,
             required: true
        }
    },
    methods: {
        hasChildren(children){
            for(var i in children){
                if(  children[i]  ){
                    if(children[i].show!='undefined'){
                       return true
                    }else{
                      return children[i].show
                    }
                }
            }
            return false;
        }
    }
}
</script>