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

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

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

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

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

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

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

递归不是靠 JS 函数调用，而是模板里直接引用自己。