一文详细介绍vue的递归组件(推荐)

const folders = [
  {
    id: 1,
    name: 'Folder 1',
    children: [
      { id: 2, name: 'File 1.1', children: [] },
      { id: 3, name: 'File 1.2', children: [] }
    ]
  },
  {
    id: 4,
    name: 'Folder 2',
    children: [
      {
        id: 5,
        name: 'Folder 2.1',
        children: [
          { id: 6, name: 'File 2.1.1', children: [] }
        ]
      }
    ]
  }
];

<template>
  <div>
    <!-- 显示当前文件夹的名称 -->
    <div>{{ folder.name }}</div>

    <!-- 如果该文件夹有子文件夹或文件，递归渲染子文件夹 -->
    <div v-if="folder.children && folder.children.length">
      <folder v-for="child in folder.children" :key="child.id" :folder="child" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Folder',  // 递归组件的名称
  props: {
    folder: Object  // 接收一个 folder 对象作为 prop
  }
};
</script>

<style scoped>
div {
  padding-left: 20px;  /* 嵌套时，子文件夹有缩进 */
  border-left: 1px solid #ccc;
  margin: 5px 0;
}
</style>

<template>
  <div>
    <h1>文件夹树</h1>
    <folder v-for="folder in folders" :key="folder.id" :folder="folder" />
  </div>
</template>

<script>
import Folder from './Folder.vue';  // 引入递归组件

export default {
  name: 'App',
  components: {
    Folder
  },
  data() {
    return {
      // 树形结构的数据
      folders: [
        {
          id: 1,
          name: 'Folder 1',
          children: [
            { id: 2, name: 'File 1.1', children: [] },
            { id: 3, name: 'File 1.2', children: [] }
          ]
        },
        {
          id: 4,
          name: 'Folder 2',
          children: [
            {
              id: 5,
              name: 'Folder 2.1',
              children: [
                { id: 6, name: 'File 2.1.1', children: [] }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

文件夹树
- Folder 1
  - File 1.1
  - File 1.2
- Folder 2
  - Folder 2.1
    - File 2.1.1
//每个文件夹会递归地渲染自己，直到没有更多的子文件夹为止。