vue 实现递归
Vue 实现递归组件的方法
在Vue中实现递归组件通常用于处理树形结构数据，例如菜单、评论回复等。递归组件的关键在于组件能够调用自身。
定义递归组件
通过给组件设置name属性，可以在模板中直接引用自身。以下是一个简单的递归组件示例：
<template>
<div>
<div>{{ data.name }}</div>
<div v-if="data.children">
<recursive-component
v-for="child in data.children"
:key="child.id"
:data="child"
/>
</div>
</div>
</template>
<script>
export default {
name: 'RecursiveComponent', // 必须设置name
props: {
data: Object
}
}
</script>使用动态组件实现递归
另一种方式是使用<component :is="...">动态组件：
<template>
<component :is="componentName" :data="data" />
</template>
<script>
export default {
props: ['data'],
computed: {
componentName() {
return this.$options.name
}
}
}
</script>递归组件注意事项
递归组件必须有明确的终止条件，否则会导致无限递归和堆栈溢出。通常通过判断数据是否存在子节点来控制递归。
v-if="data.children && data.children.length"递归组件性能优化
对于深层递归，考虑添加v-once指令缓存静态内容：
<recursive-component v-once v-for="child in data.children" :key="child.id" :data="child"/>递归组件与v-model
递归组件也可以配合v-model使用：
<recursive-component v-model="treeData" />
// 组件内部
this.$emit('input', newValue)递归组件样式处理
为递归组件添加层级样式可以使用CSS变量或计算属性传递层级深度：
:style="`--level: ${level}`"
// CSS中使用
div {
padding-left: calc(var(--level) * 10px);
}
