vue 实现树状递归
实现树状递归的核心思路
在Vue中实现树状递归结构，通常需要结合组件递归调用和动态数据渲染。核心在于组件自身调用自身，并通过props传递层级数据。
基础递归组件实现
创建一个自调用的组件模板，通过name属性使组件内部可以递归调用自身：
<template>
<div class="tree-node">
<div @click="toggle">{{ node.name }}</div>
<div v-show="isOpen" v-if="node.children">
<tree-node
v-for="child in node.children"
:key="child.id"
:node="child"
/>
</div>
</div>
</template>
<script>
export default {
name: 'TreeNode',
props: {
node: Object
},
data() {
return {
isOpen: false
}
},
methods: {
toggle() {
this.isOpen = !this.isOpen
}
}
}
</script>数据格式要求
树状数据需要符合嵌套结构，每个节点包含children数组字段：
const treeData = {
id: 1,
name: 'Root',
children: [
{
id: 2,
name: 'Child 1',
children: [
{ id: 3, name: 'Grandchild 1' }
]
}
]
}性能优化方案
对于大型树结构，需要采用虚拟滚动或懒加载策略。可通过计算属性过滤可见节点：
computed: {
visibleChildren() {
return this.isOpen ? this.node.children : []
}
}动态加载实现
实现异步加载子节点数据，需在组件中添加加载方法：
methods: {
loadChildren() {
if (!this.node.children) {
fetchChildren(this.node.id).then(children => {
this.$set(this.node, 'children', children)
})
}
this.isOpen = true
}
}样式处理技巧
通过CSS变量控制缩进量，实现视觉层级：
.tree-node {
margin-left: calc(var(--level) * 15px);
}在组件中动态绑定层级：
<div class="tree-node" :style="{'--level': level}">完整组件封装
将树组件封装为可复用的全局组件，通过provide/inject传递层级信息：
export default {
provide() {
return {
treeLevel: this.level + 1
}
},
inject: ['treeLevel'],
data() {
return {
level: this.treeLevel || 0
}
}
}事件处理机制
通过事件冒泡实现节点事件统一处理：
this.$emit('node-click', this.node)父组件监听所有层级节点事件：
<tree-node :node="treeData" @node-click="handleNodeClick"/>注意事项
- 递归组件必须设置
name属性 - 避免直接修改props中的数据，使用
$set确保响应式 - 深层递归时考虑添加层级限制
- 为每个节点设置唯一key提高渲染性能
