vue递归组件

vu递归组件的实现：

<!--递归组件-->
<template>
  <div class="contain">
      <ul>
          <li v-for="(item, i) in data" :key="i">
              <p>{{item.name}}</p>
              <digui :data="item.cList" />
          </li>
      </ul>
  </div>
</template>
<script>
export default {
    name: 'Digui',
    props: ['data']
}
</script>
<style scoped lang="scss">
.contain{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}
</style>
<!--调用递归组件-->
<template>
  <div class="Home">
    <digui :data="list"/>   
  </div>
</template>
<script>
<!--模拟的数据-->
let mock = [
      {
        "name": "黄焖鸡米饭111111111",
        cList: [
          { "name": "二级黄焖鸡" },
          {
            "name": "one chicken",
            cList: [{ "name": '三级黄焖鸡3333', cList: [{ "name": "四级黄焖鸡" }] }]
          }
        ]
      },
      { "name": "2222222222" },
      {
        "name": "黄焖鸡米饭33333333", cList: [
          { "name": "二级黄焖鸡" },
          { "name": "one chicken" }
        ]
      },
    ]
import digui from './digui'
export default {
  name: 'Home',
  components: {digui},
  data() {
    return {
      list: []
    }
  }
}
</script>