Vue侧边栏菜单通过具名插槽（header、item-icon、item-title、item-extra）和作用域插槽解耦固定结构与可变内容，支持递归渲染、折叠状态透出及默认内容回退。

Vue 插槽实现侧边栏菜单项的模板封装，核心是把“固定结构”和“可变内容”解耦——菜单容器、折叠逻辑、路由联动由组件内部管控，而菜单项的图标、文字、徽章、甚至子菜单展开区域，全部交给使用者通过插槽决定。

用具名插槽定义菜单项的可定制区域

侧边栏菜单通常包含标题区、菜单项列表、底部操作区等模块。每个菜单项又细分为图标、文字、右侧扩展（如 badge、箭头、开关等）。这些部分都不适合全靠 props 控制，尤其当业务需要在菜单项里嵌入动态组件（比如权限提示 tooltip）、条件渲染按钮、或自定义图标时，具名插槽是最清晰的方案：

• header 插槽：用于自定义顶部 Logo 或标题栏，支持任意 HTML 或组件，比如带跳转的 logo 图片 + 用户信息下拉
• default 插槽（或 menu-item）：接收整个菜单项列表，但更推荐用递归子组件配合 统一接管单个菜单项的渲染逻辑
• item-icon、item-title、item-extra：为每个菜单项预留三个具名插槽，分别控制图标区、文字区、右侧附加内容（如徽章、折叠箭头、开关按钮）

递归子组件中用作用域插槽透出数据

菜单通常是多级嵌套结构，子菜单需递归渲染。此时不能只靠静态插槽，必须让父级菜单项能把当前菜单节点的数据（如 label、icon、hasChildren、badge）传递给插槽内容。这就需要作用域插槽（scoped slot）：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

• 在递归子组件（如 SidebarSubmenu.vue）中，把当前菜单项对象作为插槽参数传出去：
• 使用方即可在父组件中这样写：
• 这样既保持了菜单骨架统一，又让每个菜单项的视觉和交互完全可定制，连图标都可以换成 或

折叠/展开状态与插槽协同处理

侧边栏常有“收起-展开”切换，收起时只显示图标，展开才显示文字。这个行为不能写死在组件内，否则会限制插槽灵活性。正确做法是：

• 把 isCollapsed 状态作为 prop 传给子组件，并在作用域插槽中一并暴露：
• 使用者根据 isCollapsed 决定是否渲染文字或调整布局，例如：{{ item.label }}
• 图标区域则始终渲染，保证收起态可用，且不依赖 CSS 隐藏——真正语义化控制

默认内容 + 插槽回退保障基础可用性

插槽不是强制填写的，要避免使用者漏传插槽导致菜单空白。Vue 提供了插槽默认内容机制：

• 在组件模板中写：
• 这样当使用者没提供 item-icon 插槽时，自动回退到默认图标；提供了就优先使用自定义内容
• 同理，item-title 可默认显示 item.label，item-extra 可默认渲染折叠箭头（对有子菜单的项）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！