Vue插槽是组件解耦与复用的底层设计契约，含匿名、具名、作用域、动态四类：匿名插槽提供默认内容占位；具名插槽实现多区域精准投递；作用域插槽支持子组件向父组件反向传参；动态插槽名实现运行时内容流向控制。
Vue 的插槽（Slots）不是语法糖，而是组件解耦与复用的底层设计契约。它让子组件专注结构和逻辑，把内容决定权交还给父组件——这才是构建真正可扩展组件库的起点。
匿名插槽：最简但最常用的内容占位
匿名插槽即不带 name 属性的 <slot>，一个子组件最多有一个默认出口。它的价值在于“无感接入”：父组件直接在子组件标签内写内容，无需声明、无需命名，自然流入。
子组件中可设置后备内容：<slot>暂无内容</slot>，仅当父组件未传任何内容时才显示。注意，它不继承子组件数据，所有变量都来自父作用域。
- 适合卡片、按钮、模态框等容器型组件
- 多个子元素会全部被包裹进同一个
<slot>节点，保持原有 DOM 结构 - Vue 3 中可简写为
<slot />，语义更清晰
具名插槽：多区域内容精准投递
当组件需要多个可定制区域（如 header、sidebar、footer），就必须用 name 区分插槽。子组件通过 <slot name="header"></slot> 定义位置，父组件用 <template #header>...</template> 投递内容。
具名插槽支持条件渲染和动态绑定：<template #[dynamicName]>...</template> 配合响应式变量，能实现布局切换、权限区块控制等场景。
- 推荐使用语义化名称（
header、actions），避免left、top等易歧义词 - 默认插槽仍可并存：
<slot></slot>对应<template #default>，但通常省略 - 未被使用的具名插槽不会渲染，也不触发副作用
作用域插槽：子组件向父组件“反向传参”
这是插槽能力跃迁的关键——子组件不仅能预留位置，还能把内部数据（如列表项、表单状态、加载进度）作为参数暴露给父组件。子组件写 <slot :item="item" :index="index"></slot>，父组件用 <template #default="{ item, index }">{{ item.name }}</template> 接收。
它打破了单向数据流限制，让渲染逻辑完全由使用者掌控。比如表格组件只管请求和分页，列定义、单元格样式、操作按钮全由父组件通过作用域插槽注入。
- 参数名可任意命名，建议与子组件逻辑强相关（
row、formState、loading） - 支持解构默认值：
{ item = {}, index = 0 }提升健壮性 - 可配合
v-if或计算属性做条件性渲染，不影响子组件生命周期
动态插槽名：运行时决定内容流向
插槽名本身可响应式绑定：<slot :name="currentView"></slot>。配合父组件的 #{{ currentView }}，就能实现视图策略切换。
典型应用包括：移动端/桌面端模板自动适配、多语言界面按 locale 加载不同文案块、用户角色变化时动态替换操作区。
- 必须用
v-bind:name或简写:name，不能用字符串插值name="{{xxx}}" - 插槽名变更时，对应
<template>内容会重新编译，但子组件实例不销毁 - 搭配
<keep-alive>可缓存不同插槽内容，避免重复初始化
