当前位置：首页 > VUE

vue v -for实现递归

2026-02-20 22:50:07VUE

Vue v-for 实现递归

在 Vue 中，可以使用 v-for 结合组件递归调用来实现树形结构或嵌套数据的渲染。以下是具体实现方法：

递归组件的基本结构

定义一个组件，在组件内部通过 v-for 遍历子数据，并在模板中调用自身（递归调用）。组件必须设置 name 属性，以便在模板中引用自身。

vue v -for实现递归

<template>
  <div>
    <!-- 当前节点内容 -->
    <div>{{ node.name }}</div>
    <!-- 递归调用子节点 -->
    <recursive-component
      v-if="node.children"
      v-for="child in node.children"
      :key="child.id"
      :node="child"
    />
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent', // 必须设置 name
  props: {
    node: Object // 接收节点数据
  }
}
</script>

使用递归组件

在父组件中传入树形结构数据，触发递归渲染。

<template>
  <recursive-component :node="treeData" />
</template>

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

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

避免无限递归

递归组件必须设置终止条件，通常通过判断子节点是否存在（如 v-if="node.children"）来避免无限递归。

vue v -for实现递归

动态导入递归组件

如果组件在自身模板中直接调用自身，可能会导致模块循环依赖。可以通过动态导入解决：

<template>
  <div>
    <div>{{ node.name }}</div>
    <component
      :is="RecursiveComponent"
      v-for="child in node.children"
      :key="child.id"
      :node="child"
    />
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: ['node'],
  data() {
    return {
      RecursiveComponent: () => import('./RecursiveComponent.vue')
    }
  }
}
</script>