vue组件递归

递归组件，就是在组件中内使用组件本身。通常使用在多级列表的渲染上。 

 父组件

// Index.vue
<template>  
    <div class="index">    
        <list :list="list"></list>  
    </div>
</template>
<script>
    import List from "./List";
    export default {  
        name: "Index",  
        data() {    
            return {      
                list: [        
                    {          
                        name: 1,          
                        children: [            
                            {              
                                name: "1-1"           
                            },            
                            {             
                                name: "1-2"            
                            }          
                        ]        
                    },        
                    {          
                        name: 2,          
                        children: [            
                            {              
                                name: "2-1"            
                            },            
                            {              
                                name: "2-2"            
                            }          
                        ]        
                    }      
                ]    
            };  
        },  
        components: {   List  }
    };
  </script>

 子组件：

<template>  
    <div class="recursion">    
        <div class="list-item" v-for="(item, index) in list" :key="index">      
            <div class="item-name">        
                <span>{{ item.name }}</span>      
            </div>      
            <div v-if="item.children" class="child-item">        
                <list :list="item.children"></list>      
            </div>    
        </div>  
    </div>
</template>
<script>
    export default {  
        name: "List",  
        props: {    list: Array  }
    };
</script>

 渲染效果：