Vue插槽本质是子组件预留“内容入口”，父组件按需填入HTML、文本或组件以灵活定制外观结构；它传递模板而非数据，与props有根本区别。

Vue 插槽（Slot）本质是让子组件预留“内容入口”，父组件按需填入 HTML、文本或其它组件，从而在不修改子组件逻辑的前提下实现外观和结构的灵活定制。它不是传数据，而是传模板——这是和 props 的根本区别。

默认插槽：单点内容替换最常用

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

• 子组件用 <slot></slot> 标记内容占位位置；没写内容时，<slot>默认文案</slot> 会显示
• 父组件直接在子组件标签内写内容，自动注入到那个 <slot> 处
• 支持任意内容：纯文本、<p></p>、图标组件、甚至嵌套另一个子组件

具名插槽：多区域精准投放

当组件有头部、主体、底部等多个可定制区时，靠名字区分，避免内容错位。

vue-component-analyzer

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

下载

• 子组件中用 <slot name="header"></slot>、<slot name="footer"></slot> 等定义多个带名插槽
• 父组件用 v-slot:header 或简写 #header 指定内容投向哪个区域
• 未命名的 <slot> 仍作为默认插槽存在，可用普通写法填充

作用域插槽：把子组件数据交给父组件渲染

适用于列表类组件（如用户列表、表格行），子组件负责获取/处理数据，父组件决定怎么展示每一条。

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

• 子组件在 <slot> 上绑定属性，例如 <slot :user="item" :index="idx"></slot>
• 父组件用 v-slot="{ user, index }" 解构接收，并在模板中自由使用这些变量
• 这样既复用了子组件的数据逻辑，又把 UI 控制权完全交给了使用者

插槽不是炫技工具，而是组件设计的“留白艺术”——留得恰到好处，才能让别人愿意复用你的组件。