当前位置：首页 > VUE

vue实现递归

2026-01-07 07:47:24VUE

Vue 实现递归组件的方法

在 Vue 中实现递归组件通常用于处理树形结构数据（如菜单、评论列表、文件目录等）。以下是具体实现方法：

定义递归组件

通过 name 选项让组件可以递归调用自身：

vue实现递归

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

<script>
export default {
  name: 'MyComponent', // 必须定义name才能递归
  props: {
    node: Object
  }
}
</script>

使用动态组件实现

当组件名称不确定时，可以使用动态组件：

vue实现递归

<template>
  <component :is="componentName" :node="node"/>
</template>

<script>
export default {
  props: ['node'],
  computed: {
    componentName() {
      return this.node.type === 'folder' ? 'FolderComponent' : 'FileComponent'
    }
  }
}
</script>

控制递归深度

避免无限递归需要设置终止条件：

<template>
  <div>
    <span>{{ data.title }}</span>
    <recursive-item
      v-if="data.children && depth < maxDepth"
      v-for="item in data.children"
      :key="item.id"
      :data="item"
      :depth="depth + 1"
      :max-depth="maxDepth"
    />
  </div>
</template>

<script>
export default {
  name: 'RecursiveItem',
  props: {
    data: Object,
    depth: {
      type: Number,
      default: 0
    },
    maxDepth: {
      type: Number,
      default: 5
    }
  }
}
</script>

异步递归组件

处理异步加载的树形数据：

<template>
  <div>
    <div @click="toggle">{{ node.name }}</div>
    <div v-if="expanded && node.children">
      <async-recursive
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AsyncRecursive',
  props: ['node'],
  data() {
    return {
      expanded: false
    }
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded
      if (this.expanded && !this.node.children) {
        this.loadChildren()
      }
    },
    async loadChildren() {
      this.node.children = await fetchChildren(this.node.id)
    }
  }
}
</script>