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>

效果
-

vue 递归 无限极

vue 递归无限极