当前位置：首页 > VUE

vue 递归实现树

2026-03-08 07:40:28VUE

Vue 递归实现树形结构的方法

在 Vue 中实现递归树形结构通常需要结合组件递归调用和动态数据渲染。以下是几种常见的方法：

使用组件递归调用

创建一个递归组件，组件内部调用自身来处理嵌套的树形数据。需要设置组件的 name 属性以便递归调用。

vue 递归实现树

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

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

动态组件实现递归

通过动态组件的方式实现递归，适用于更复杂的场景。

vue 递归实现树

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

<script>
export default {
  name: 'TreeComponent',
  props: {
    node: Object
  },
  computed: {
    componentName() {
      return this.node.children ? 'TreeComponent' : 'LeafComponent'
    }
  }
}
</script>

使用作用域插槽

通过作用域插槽实现树形结构的递归渲染，提供更大的灵活性。

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

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

结合计算属性处理数据

在递归组件中使用计算属性对树形数据进行处理，例如过滤或排序。

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

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  },
  computed: {
    processedData() {
      return this.treeData.filter(item => !item.hidden)
    }
  }
}
</script>