vue递归组件需三点：显式命名（defineoptions或name选项）、安全终止条件（array.isarray且length>0）、每层独立（唯一key、透传props、本地状态）。
在 Vue 单文件组件中优雅渲染递归子组件，关键不是“怎么调用自己”，而是让每次调用都干净、可控、不崩。核心就三点：组件能认出自己、有明确出口、每一层都独立。
必须显式声明 name 属性
Vue 不允许匿名组件自调用。哪怕用了 <script setup></script>，也得主动告诉模板“我是谁”：
- 组合式 API 中写：
defineOptions({ name: 'TreeNode' }) - 选项式 API 中写：
export default { name: 'TreeNode', ... } - 命名后，模板里才能合法写
<treenode :node="child"></treenode>，否则会静默忽略或报错
终止条件要防 null、undefined 和空数组
只写 v-if="node.children" 很危险——children: null 或 undefined 会停，但 children: [] 也会被跳过，导致本该显示的空文件夹直接消失。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 稳妥写法：
v-if="Array.isArray(node.children) && node.children.length" - 如果节点结构更复杂（比如含
type: 'folder'字段），可叠加判断：v-if="node.type === 'folder' && Array.isArray(node.children) && node.children.length" - 入口处加兜底：
if (!node || !node.id) return，避免初始数据残缺引发异常
每一层递归都要是独立实例
父子节点不能共用状态，也不能 key 冲突：
-
key 必须唯一稳定：用子节点自身
id，如:key="child.id"；若 id 不全局唯一，拼路径更安全：:key="`${node.id}-${child.id}` -
props 要逐级透传：父组件传
:node="child"，子组件再同样处理它的children，不改名、不合并 -
展开状态别分散管理：每个组件自己用
ref(false)管理isOpen是可行的，但父子联动易失序；推荐提一层，用Map或响应式对象统一存id → isOpen
样式和交互要体现层级感
用户靠视觉理解嵌套关系，不是靠代码逻辑：
- 用
padding-left实现缩进，每层固定增加24px，比用margin更稳 - 加连接线强化父子关系：
border-left: 1px solid #eee，注意给顶层节点设border-left: none避免多余线 - 折叠/展开图标建议用 SVG，配合
transition做旋转动画，点击整行触发切换更符合直觉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
