当前位置：首页 > VUE

vue 实现树状递归

2026-03-30 09:33:56VUE

Vue 实现树状递归的方法

在 Vue 中实现树状递归通常可以通过组件递归调用自身的方式完成。以下是几种常见的实现方法：

递归组件实现

通过组件调用自身实现树状结构。需要为组件设置 name 属性，以便在模板中递归调用。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-node v-if="item.children" :treeData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用作用域插槽

通过作用域插槽实现更灵活的树状结构渲染。

<template>
  <tree-node :data="treeData">
    <template v-slot="{ data }">
      <span>{{ data.name }}</span>
    </template>
  </tree-node>
</template>

<script>
export default {
  components: {
    TreeNode: {
      template: `
        <ul>
          <li v-for="item in data" :key="item.id">
            <slot :data="item"></slot>
            <tree-node v-if="item.children" :data="item.children">
              <template v-slot="{ data }">
                <slot :data="data"></slot>
              </template>
            </tree-node>
          </li>
        </ul>
      `,
      props: ['data']
    }
  }
}
</script>

动态组件实现

通过动态组件方式实现递归渲染。

<template>
  <component
    :is="componentType"
    v-bind="$props"
  />
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    items: Array,
    componentType: {
      type: String,
      default: 'RecursiveComponent'
    }
  }
}
</script>

使用计算属性优化

对于大型树状结构，可以使用计算属性优化性能。

vue 实现树状递归

<template>
  <ul>
    <li v-for="item in processedTree" :key="item.id">
      {{ item.name }}
      <tree-node v-if="hasChildren(item)" :treeData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  },
  computed: {
    processedTree() {
      return this.treeData.map(item => ({
        ...item,
        // 添加其他处理逻辑
      }))
    }
  },
  methods: {
    hasChildren(item) {
      return item.children && item.children.length
    }
  }
}
</script>