递归组件——练习实例

  <div id="app">
        <parent :list='list'></parent>
    </div>
    <script>
         var child = {
            props:{
             list:{
                type:Array
                }
            },
            name:'parent',
            template:`
                <div>
                     <parent :list="list"></parent>
                </div>
            ` ,
            data:function(){
                return {
                   
                }
            },
       }
       var parent = {
           props:{
                list:{
                    type:Array
                }
           },
            template:`
            <div>
                <div v-for="(item,index) in list">
                        {{item.name}} 
                    <div v-if="item.children">
                         <child :list="item.children"></child>
                    </div>  
                </div>
            </div>
            ` ,
            name:'child',
            components:{child},
            data:function(){
                return {
                   
                }
            }  
       }

       
       new Vue({
           el:'#app',
           data:{
            list: [{
                        name: "一级",
                        children: [{
                            name: "二级",
                            children: [{
                                name: "三级"
                                },
                                {
                                name: "三级"
                                }]
                            },{
                            name: "二级",
                            children: [{
                                name: "三级"
                                },
                                {
                                name: "三级"
                                }]
                            }]
                        },
                        {
                        name: "一级",
                        children: [{
                            name: "二级",
                            children: [{
                                name: "三级"
                                },
                                {
                                name: "三级"
                                }]
                            },{
                            name: "二级",
                            children: [{
                                name: "三级"
                                },
                                {
                                name: "三级"
                                }]
                            }]
                        }
                    ]
           },
           components:{ parent}
              
           
       })
    </script>