Vue2递归组件实现树形菜单需显式声明name、用v-if防止无限递归、key用唯一id、状态由父组件受控管理。示例中TreeItem通过name定义、children判断、expandedIds控制展开，emit事件通知父组件更新状态。
Vue2 中用递归组件实现树形菜单，核心在于让一个组件在模板里调用自己，配合层级数据结构（如 children 数组）逐层展开。它不依赖固定层数，能自动适配任意深度的菜单或目录树。
必须显式声明组件 name
Vue2 要求递归组件必须通过 name 选项声明自己的名称，否则模板中无法识别“自己”。这个 name 就是模板里用来调用自己的标签名：
- 在组件导出对象中添加 name: 'TreeMenu'
- 模板中用 <TreeMenu>（注意大小写与 name 一致）调用自身
- 不能只靠文件名或局部注册名——Vue2 不会自动推断，必须显式定义
递归渲染的关键条件判断
防止无限递归导致栈溢出，每次调用前必须加安全守卫：
- 检查是否有子节点：v-if="item.children && item.children.length"
- 确保子节点是数组且非空，避免传入 undefined 或 [] 导致重复渲染
- key 一定要基于唯一字段（如 id），不能用 index，否则层级变动时状态错乱
状态管理推荐“受控模式”
展开/收起、选中等交互状态，建议由父组件统一维护，子组件只负责展示和触发事件：
立即学习“前端免费学习笔记（深入）”；
- 父组件传入 :expandedIds="expandedSet" 控制哪些节点展开
- 子组件点击时 emit('toggle', nodeId)，由父组件更新 expandedSet
- 避免每个子组件维护独立 open 状态——深层嵌套下难以同步，也容易内存泄漏
基础结构示例（TreeItem.vue）
一个最小可行递归菜单组件长这样：
<template>
<div class="tree-item">
<div @click="handleToggle">? {{ item.name }}</div>
<TreeItem
v-if="expandedIds.has(item.id) && item.children && item.children.length"
v-for="child in item.children"
:key="child.id"
:item="child"
:expandedIds="expandedIds"
@toggle="$emit('toggle', $event)"
/>
</div>
</template>
<script>
export default {
name: 'TreeItem',
props: {
item: { type: Object, required: true },
expandedIds: { type: Set, default: () => new Set() }
},
methods: {
handleToggle() {
this.$emit('toggle', this.item.id)
}
}
}
</script> 
