Vue.js插槽实现结构与内容解耦：默认插槽用于单区域替换，具名插槽支持多区域精准分发，作用域插槽传递子组件数据供父组件定制渲染，动态插槽名实现运行时插槽切换。

Vue.js 中利用 slot 实现可自定义结构的组件布局，核心在于把“固定结构”和“可变内容”解耦。子组件只负责容器逻辑与样式，父组件决定往哪里塞什么内容——不需要改子组件代码，就能灵活调整界面结构。

默认插槽：最简内容替换

适合只有一个可变区域的场景，比如按钮文字、卡片主体、弹窗内容等。

• 子组件用 <slot></slot> 占位，内部可写默认文案（后备内容）
• 父组件直接在标签内写内容，会被自动注入到默认插槽位置
• 支持 HTML 标签、组件、表达式，不局限于纯文本

具名插槽：多区域精准分发

当组件有 header、sidebar、footer 等多个定制点时，必须靠具名插槽区分。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 子组件用 <slot name="header"></slot>、<slot name="main"></slot> 等定义命名位置
• 父组件用 <template v-slot:header></template> 或简写 <template #header></template> 分发内容
• 未传入的具名插槽会显示其内部默认内容（如有），不会留空

作用域插槽：带数据的内容定制

当父组件需要访问子组件内部的数据（如列表项、表单状态）才能渲染内容时，就得用作用域插槽。

立即学习“前端免费学习笔记（深入）”；

• 子组件在 <slot> 上绑定属性，例如 <slot :item="row" :index="idx"></slot>
• 父组件用 <template #default="{ item, index }"></template> 解构接收，按需渲染
• 常用于表格行操作、列表项图标、条件渲染按钮等强交互场景

动态插槽名：运行时切换插槽入口

适用于插槽名称由状态决定的情况，比如 tab 切换、模板类型配置等。

• Vue 3 写法：v-slot:[slotName]，其中 slotName 是 ref 或 reactive 的字符串变量
• 不能写成 v-slot:['header']（单引号导致静态字符串，无效）
• Vue 2.6+/3 兼容方案：配合 v-if 在子组件中条件渲染不同 <slot>，更可控但不够灵活