在 Vue.js 中，slot（插槽） 是一种强大的组件间内容分发机制，它允许父组件向子组件传递自定义内容（包括 HTML 结构、文本甚至其他组件），从而极大地增强了组件的灵活性和可复用性。 下面这个表格可以帮助你快速把握 slot 的核心分类与特点：
插槽类型核心功能语法关键词适用场景默认插槽为组件定义一个主要的内容注入点
💡 核心价值与使用场景
slot 的存在主要是为了解决组件封装中的灵活性问题。它的核心价值体现在：
提升组件复用性：通过 slot，你可以创建出高内聚、低耦合的通用组件。组件的“骨架”和“内容”分离，使得同一个组件可以在不同场景下通过注入不同的内容来满足需求，无需为了细微差别而创建多个相似组件。
实现内容定制：当父组件需要在子组件内部插入特定内容时，slot 提供了标准的“接口”。这在构建布局组件（如卡片、模态框、标签页）、数据展示组件（如表格行、列表项）时尤为有用。
分离关注点：slot 使得子组件可以专注于自身的布局和数据结构，而将具体的UI 表现权交给父组件，尤其通过作用域插槽，实现了数据逻辑和UI渲染的解耦。
🛠️ 三种 Slot 详解与代码示例
- 默认插槽 (Default Slot)
这是最基础的插槽，充当子组件的内容占位符。如果父组件提供了内容，就会替换掉标签；如果没有提供，则显示 标签内的默认内容。
子组件定义 (ChildComponent.vue):
xml 体验AI代码助手 代码解读复制代码
这是后备默认内容，如果父组件不传内容，就会显示这个。
父组件使用:
xml 体验AI代码助手 代码解读复制代码
<!-- 注入自定义内容到默认插槽 -->
<h3>我是父组件传过来的标题</h3>
<p>这里是父组件定义的卡片正文内容。</p>- 具名插槽 (Named Slots)
当一个组件需要多个插槽时，使用具名插槽来区分。通过 name属性给插槽命名，父组件使用 v-slot:name或 #name来定向分发内容。
子组件定义 (LayoutComponent.vue):
xml 体验AI代码助手 代码解读复制代码
父组件使用:
xml 体验AI代码助手 代码解读复制代码
<template #header> <!-- 或 v-slot:header -->
<h1>这是页眉</h1>
</template>
<p>这段内容会自动放入默认插槽。</p>
<template #footer>
<p>这是页脚信息</p>
</template>- 作用域插槽 (Scoped Slots)
这是最强大的插槽类型。它允许子组件将数据传递给父组件，父组件可以利用这些数据来灵活定义渲染逻辑。这常用于循环渲染或数据展示组件，如表格、列表。
子组件定义 (TodoList.vue):
xml 体验AI代码助手 代码解读复制代码
-
{{ todo.text }}
父组件使用:
xml 体验AI代码助手 代码解读复制代码
<!-- 通过 `v-slot` 接收子组件传递的数据 -->
<template v-slot:default="slotProps">
<!-- slotProps 是一个对象，包含了子组件传递的所有 prop -->
<span :style="{ textDecoration: slotProps.todoItem.isCompleted ? 'line-through' : 'none' }">
{{ slotProps.todoItem.text }}
</span>
</template>在这个例子中，父组件根据子组件传来的 todo-item数据，决定是否给待办项添加删除线，实现了UI 渲染的完全自定义。
⚠️ 注意事项与最佳实践
缩写语法：v-slot:可以缩写为 #，例如 #header。但注意，#default不能简写为 #。
默认内容：始终在
作用域：父模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子级作用域中编译的。作用域插槽是唯一一个例外。
动态插槽名：Vue 2.6.0+ 支持使用动态指令参数定义动态插槽名，例如 v-slot:[dynamicSlotName]。
希望这份详细的解释能帮助你全面理解 Vue 中的 slot 机制！