递归组件

一定要设置终止条件

重复import ./xxx自己即可

// 组件本体，v-if终止
// v-for
<template>
    <div>
        <span>{{ item.name }}</span>
        <div v-if="item.children.length">
            <recursive-component  :item="comp"
            v-for="(comp) in item.children" :key="comp.id"/>
        </div>

    </div>
</template>

<script>
import  RecursiveComponent  from './RecursiveComponent.vue'
export default {
  name: 'RecursiveComponent',
  props: ['item'],
}
</script>

// 页面
<template>
    <div>
      <recursive-component :item="data" />
    </div>
  </template>

  <script>
  import RecursiveComponent from './RecursiveComponent.vue';

  export default {
    components: {
      RecursiveComponent,
    },
    data() {
      return {
        data: {
          id: 1,
          name: 'Parent',
          children: [
            {
              id: 2,
              name: 'Child 1',
              children: [
                {
                  id: 3,
                  name: 'Grandchild 1',
                  children: [],
                },
              ],
            },
            {
              id: 4,
              name: 'Child 2',
              children: [],
            },
          ],
        },
      };
    },
  };
  </script>