Vue插槽是父组件写内容、子组件定位置的结构分发机制，分默认插槽（单点注入）、具名插槽（多区域精准投递）和作用域插槽（透出子组件数据），内容在父组件作用域编译，语义源自Web Components并增强。
Vue 组件的插槽内容分发机制，本质是“父组件写内容、子组件定位置”的协作逻辑。它不传递数据，而是把模板结构从父级“流动”到子级预留的 <slot> 位置，实现结构与内容的解耦。
默认插槽：单点内容注入
子组件模板中只放一个 <slot></slot>，没有 name 属性，就启用了默认插槽。父组件在标签内写的任意内容（文本、HTML、组件）都会被原样插入到这里。
- 子组件中可写默认内容：
<slot>暂无内容</slot>，当父组件没传内容时显示 - 插槽内容始终在父组件作用域中编译，能访问父组件的
data、props、methods，但无法直接读取子组件的数据 - 适合卡片、模态框主体、按钮文字等只需一个填充区的场景
具名插槽：多区域精准投递
当子组件需要多个独立内容区（比如头部、侧边栏、底部操作栏），就用 name 区分插槽出口。
- 子组件定义：
<slot name="header"></slot>、<slot name="footer"></slot> - 父组件使用
v-slot:header或简写#header明确指定内容去向 - 未命名的插槽内容默认进入
name="default"插槽（即使没显式写name="default"） - 常用于布局类组件（如
<BaseLayout>）、表单容器、弹窗结构
插槽内容的作用域规则
插槽不是“运行时搬运”，而是“编译时绑定”。它的行为严格遵循词法作用域：
立即学习“前端免费学习笔记（深入）”；
- 父组件模板里的插槽内容，在父组件上下文中编译 —— 所以能用
{{ parentMsg }}，但不能用{{ childCount }} - 子组件模板里的普通表达式，在子组件上下文中编译 —— 所以
{{ title }}能读取props.title - 若需把子组件数据暴露给插槽渲染，必须升级为作用域插槽（通过
slotProps透出）
插槽与 Web Components 的关系
Vue 的 <slot> 直接借鉴自原生 Web Components 规范，语义和基本行为一致。Vue 在此基础上做了增强：支持动态插槽名、条件插槽、作用域插槽、v-slot 指令统一语法等，使内容分发更可控、更灵活。
