如何通过插槽机制构建适应任意深度树形结构的递归菜单组件？

本文共计647个文字，预计阅读时间需要3分钟。

使用插槽实现递归菜单组件，核心是让子菜单通过默认插槽接收内容——在父子组件渲染时，将当前节点的子项传递给子组件，子组件再使用相同逻辑处理，形成自调用链。

用作用域插槽传递子节点数据

父级菜单项需把 children 数组作为插槽 props 透传下去，让子组件能访问并决定是否继续递归：

• 菜单项组件接收 item 和可选的 children prop
• 在模板中，用 <slot :item="item" :children="item.children"></slot> 暴露数据
• 外部使用时，用 v-slot="{ item, children }" 解构，并在 children 存在且非空时，再次渲染同个菜单组件

组件自身调用自身（关键递归点）

递归不是靠 JS 函数调用，而是模板里直接引用自己。为避免命名冲突，需给组件注册一个明确的 name：

• 在组件选项中设置 name: 'RecursiveMenu'
• 模板内用 <recursive-menu v-if="children && children.length" :items="children" />
• 注意：不能用 <component :is="..."> 动态方式，否则 Vue 无法静态分析递归依赖

控制递归边界与防无限循环

树结构若存在环或数据异常，容易导致栈溢出。需主动设防：

• 加 depth prop，默认从 0 开始，每次递归 +1；到达阈值（如 6 层）后停止渲染子菜单
• 对 items 做浅层校验：过滤掉 null、undefined 或非对象项
• 开发时可用 console.warn 提示过深嵌套，便于排查数据问题

样式与交互保持连贯性

每一层递归菜单应继承统一的缩进、展开状态和点击行为：

• 用 CSS padding-left 或 margin-left 配合 depth 动态计算缩进
• 展开/收起状态建议提升到顶层管理（如用 Map 缓存各节点 id 的 opened 状态），避免每层独立响应造成状态不一致
• 点击菜单项触发事件时，带上 path（如 [id1, id2, id3]）方便定位完整路径