10分钟了解Vue3递归组件的用法

递归组件在前端开发中常用于处理层级比较深的数据结构。Vue3提供了一些新的特性，让递归组件的实现更加简单易用。

递归组件是什么？

递归组件是指一个组件可以在它的模板中调用自己。这种组件通常用于处理树形结构或列表的情况。

实现递归组件的步骤

在Vue3中，实现递归组件需要 following 步骤：

1. 创建组件；
2. 在组件的 template 中使用组件自身。

下面我们通过一个树形结构的示例来演示如何实现递归组件。

示例一：树形结构

我们在这个示例中需要渲染一个树形结构，每个节点包含一个 value 属性和一个 children 属性。children 属性是一个数组，包含了它的子节点。

首先我们定义一个组件 TreeNode，用于渲染每个树节点。

<template>
  <div class="node">
    {{ value }}
    <ul>
      <tree-node v-for="child in children" :value="child.value" :children="child.children" />
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    value: String,
    children: Array
  }
}
</script>

在这个组件中，我们使用了递归的方式来渲染树节点的所有子节点。如果当前节点有 children 属性，我们就使用 v-for 遍历它的 children 数组，然后在每个子节点中递归渲染 TreeNode 组件。

接下来，我们定义一个根组件 Tree，用于渲染整个树结构。

<template>
  <tree-node :value="tree.value" :children="tree.children" />
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  name: 'Tree',
  components: {
    TreeNode
  },
  props: {
    tree: Object
  }
}
</script>

在这个组件中，我们使用了一个 prop tree 来表示整棵树的根节点。然后我们在 template 中调用 TreeNode 组件，并将树根节点的 value 和 children 作为 prop 传给它。

现在我们可以使用这个 Tree 组件来渲染任意一棵树。下面是一个示例数据：

{
  value: 'root',
  children: [
    {
      value: 'child1',
      children: [
        {
          value: 'grandchild1',
          children: []
        }
      ]
    },
    {
      value: 'child2',
      children: []
    }
  ]
}

我们把这个数据传给 Tree 组件，就可以渲染出整棵树。

<template>
  <div>
    <tree :tree="treeData" />
  </div>
</template>

<script>
import Tree from './Tree.vue'

export default {
  components: {
    Tree
  },
  data() {
    return {
      treeData: {
        value: 'root',
        children: [
          {
            value: 'child1',
            children: [
              {
                value: 'grandchild1',
                children: []
              }
            ]
          },
          {
            value: 'child2',
            children: []
          }
        ]
      }
    }
  }
}
</script>

现在我们已经成功地实现了一个递归组件，可以用来渲染任意一棵树了。

示例二：无限级分类

递归组件还可以用于渲染无限级分类的数据结构。我们可以使用一个类似上面例子中的 TreeNode 组件来渲染每个分类名称，并递归渲染每个分类的子分类。

下面是一个示例数据：

{
  name: 'level1',
  children: [
    {
      name: 'level2-1',
      children: [
        {
          name: 'level3-1',
          children: []
        },
        {
          name: 'level3-2',
          children: []
        }
      ]
    },
    {
      name: 'level2-2',
      children: []
    }
  ]
}

我们可以使用以下代码实现无限级分类组件：

<template>
  <ul>
    <li v-for="category in categories" :key="category.name">
      {{ category.name }}
      <category v-if="category.children.length > 0" :categories="category.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Category',
  props: {
    categories: Array
  }
}
</script>

在这个组件中，我们使用 v-for 遍历 categories 数组，并将每个分类的名称渲染出来。然后我们使用递归的方式来渲染每个分类的子分类。

现在我们只需要将数据传递给 Category 组件，就可以生成无限级分类的树形结构了。

<template>
  <div>
    <category :categories="categories" />
  </div>
</template>

<script>
import Category from './Category.vue'

export default {
  components: {
    Category
  },
  data() {
    return {
      categories: {
        name: 'level1',
        children: [
          {
            name: 'level2-1',
            children: [
              {
                name: 'level3-1',
                children: []
              },
              {
                name: 'level3-2',
                children: []
              }
            ]
          },
          {
            name: 'level2-2',
            children: []
          }
        ]
      }
    }
  }
}
</script>