vue 实现组件递归（嵌套自身）

vue 实现组件递归

主要使用到了 组件中的name, 当我们设置了组件的name，组件递归调用自身使用的组件名为name；

例子

// 递归组件 demo.vue
<template>
  <div>
    <div v-for="(item, index) in treeData" :key="index">
      <p>{{ item.title }}</p>
      <div class="children" v-if="item.children">
     <!-- 嵌套自身 -->
        <Demo :treeData="item.children"></Demo>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Demo",
  props: ["treeData"],
  data() {
    return {};
  },
  created() {},
};
</script>
<style  scoped>
.children {
  padding-left: 10px;
}
</style>

父组件调用demo.vue

<demo :treeData="treeData" ></demo>

//   模拟递归
      treeData: [
        {
          title: "递归层1",
          children: [
            {
              title: "递归层1-1",
              children: [
                {
                  title: "递归层1-1-1",
                },
                {
                  title: "递归层1-2-1",
                  children: [
                    {
                      title: "递归层1-2-1-1",
                    },
                    {
                      title: "递归层1-2-1-2",
                    },
                  ],
                },
              ],
            },
            {
              title: "递归层1-2",
            },
          ],
        },
      ],

效果