Vue侧边栏菜单通过具名插槽（header、item-icon、item-title、item-extra）和作用域插槽解耦固定结构与可变内容，支持递归渲染、折叠状态透出及默认内容回退。
Vue 插槽实现侧边栏菜单项的模板封装，核心是把“固定结构”和“可变内容”解耦——菜单容器、折叠逻辑、路由联动由组件内部管控，而菜单项的图标、文字、徽章、甚至子菜单展开区域，全部交给使用者通过插槽决定。
用具名插槽定义菜单项的可定制区域
侧边栏菜单通常包含标题区、菜单项列表、底部操作区等模块。每个菜单项又细分为图标、文字、右侧扩展（如 badge、箭头、开关等）。这些部分都不适合全靠 props 控制，尤其当业务需要在菜单项里嵌入动态组件（比如权限提示 tooltip）、条件渲染按钮、或自定义图标时，具名插槽是最清晰的方案：
- header 插槽：用于自定义顶部 Logo 或标题栏，支持任意 HTML 或组件，比如带跳转的 logo 图片 + 用户信息下拉
-
default 插槽（或 menu-item）：接收整个菜单项列表，但更推荐用递归子组件配合
<slot name="item"></slot>统一接管单个菜单项的渲染逻辑 - item-icon、item-title、item-extra：为每个菜单项预留三个具名插槽，分别控制图标区、文字区、右侧附加内容（如徽章、折叠箭头、开关按钮）
递归子组件中用作用域插槽透出数据
菜单通常是多级嵌套结构，子菜单需递归渲染。此时不能只靠静态插槽，必须让父级菜单项能把当前菜单节点的数据（如 label、icon、hasChildren、badge）传递给插槽内容。这就需要作用域插槽（scoped slot）：
- 在递归子组件（如
SidebarSubmenu.vue）中，把当前菜单项对象作为插槽参数传出去：<slot name="item" :item="menuItem"></slot> - 使用方即可在父组件中这样写：
<template item><i :class="item.icon"></i> {{ item.label }}<span v-if="item.badge" class="badge">{{ item.badge }}</span></template> - 这样既保持了菜单骨架统一，又让每个菜单项的视觉和交互完全可定制，连图标都可以换成
<svg-icon></svg-icon>或<el-avatar></el-avatar>
折叠/展开状态与插槽协同处理
侧边栏常有“收起-展开”切换，收起时只显示图标，展开才显示文字。这个行为不能写死在组件内，否则会限制插槽灵活性。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 把
isCollapsed状态作为 prop 传给子组件，并在作用域插槽中一并暴露：<slot name="item" :item="item" :iscollapsed="isCollapsed"></slot> - 使用者根据
isCollapsed决定是否渲染文字或调整布局，例如：<span v-if="!isCollapsed">{{ item.label }}</span> - 图标区域则始终渲染，保证收起态可用，且不依赖 CSS 隐藏——真正语义化控制
默认内容 + 插槽回退保障基础可用性
插槽不是强制填写的，要避免使用者漏传插槽导致菜单空白。Vue 提供了插槽默认内容机制：
- 在组件模板中写：
<slot name="item-icon" :item="item"><i :class="item.icon || 'el-icon-menu'"></i></slot> - 这样当使用者没提供
item-icon插槽时，自动回退到默认图标；提供了就优先使用自定义内容 - 同理，
item-title可默认显示item.label，item-extra可默认渲染折叠箭头（对有子菜单的项）
