vue 递归 无限极

　　　　demo(父组件向子组件传值，将子组件注册进父组件中，父组件拥有子组件的功能)

• index.js

  • import Parent from '@/components/Parent'
    
    
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/Parent',
          name: 'Parent',
          component: Parent
        },
      ]
    })

• list.vue

  • <template>
        <div>
            <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="children-item">
                    <list :list="item.children"></list>
                </div>
            </div>
        </div>
    </template>
    <script>
    export default {
        //利用命名空间调用，递归里必须用name
      name: "List",
      //通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据
      props: {
        list: Array
      }
    };
    </script>
    <style>
    .list-item{
        padding-left: 20px;
        list-style: none;
    }
    
    
    </style>

• Parent.vue

  • <template>
        <div class="list-detail">
          <list :list="list"></list>
        </div>
    </template>
    <script>
    //导入子组件
    import List from './list'
    export default {
      name: "Parent",
      //注册子组件,应用
      components: { List },
      data() {
        return {
          list: [{
              name: "少年",
              children: [{
                  name: "欣总",
                  children: [{
                      name: "666"
                    },
                    {
                      name: "666"
                    }]
                },{
                  name: "管总",
                  children: [{
                      name: "777"
                    },
                    {
                      name: "777"
                    }]
                }]
            }]
        }
      }
    }
    </script>

• 效果
  •