vue递归组件

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

<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

<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>