Vue插槽是父子组件间内容分发机制，含默认插槽（单点定制）、具名插槽（多区域定位）和作用域插槽（子组件数据反向暴露），三者协同实现高复用、强表达的组件设计。
Vue插槽是父子组件之间内容分发的核心机制，不是数据传递，而是模板结构的“留白+填充”。掌握三种插槽类型的关键，在于理解它们解决的问题不同：默认插槽处理单点定制，具名插槽处理多区域定位，作用域插槽解决子组件数据向父组件内容反向暴露的问题。
默认插槽：一个组件一个“内容洞”
适用于外框固定、中间内容可变的场景，比如卡片、弹窗主体、布局容器等。子组件用
- 子组件中
可带默认内容，如 <slot>暂无内容</slot>，父组件不传时自动显示 - 父组件传入的内容会完全替换
标签本身，包括文本、HTML标签、组件甚至其他插槽 - 一个组件只能有一个默认插槽；若同时存在具名插槽，未命名的
仍为默认插槽
具名插槽：按名字精准投递内容
当组件需要多个可定制区域（如header/body/footer），就需用name属性区分插槽。父组件通过v-slot:xxx或简写#xxx指定内容归属。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 子组件中定义
<slot name="header"></slot>和<slot name="footer"></slot>，就创建了两个具名插槽 - 父组件用
<template #header><h2>标题</h2></template>将内容绑定到对应位置 - 具名插槽顺序无关——即使
#footer写在#header前面，内容依然准确落入各自区域 - 默认插槽可与具名插槽共存，未被
v-slot包裹的内容自动进入默认插槽
作用域插槽：把子组件的数据“交出去”给父组件渲染
当父组件需要根据子组件内部状态（如列表项数据、加载状态、错误信息）来决定如何渲染内容时，就必须用作用域插槽。它本质是“带参数的插槽”，子组件通过slot的props属性向外传数据，父组件用v-slot="{ item, index }"解构使用。
立即学习“前端免费学习笔记（深入）”；
- 子组件中写
<slot :item="todo" :index="idx"></slot>，就把item和index作为插槽属性暴露出去 - 父组件用
<template #default="{ item, index }"><span>{{ index + 1 }}. {{ item.text }}</span></template>接收并使用 - 作用域插槽支持具名，例如
#item="{ item }"或#empty，便于按状态分支渲染 - 常见于列表组件、表格行、条件空态提示等需要“数据驱动模板”的场景
插槽不是语法糖，而是一种设计契约：子组件定义“哪里能填”，父组件决定“填什么”以及“怎么填”。用对插槽，组件才真正具备复用性与表达力。
