Slots体系全总结：匿名到作用域插槽的灵活组件基石

在 Vue 生态中，插槽（Slots）常被简单视为一种便捷语法糖，但事实上，它是组件实现解耦与复用的核心设计契约。这套机制的精妙之处在于：它让子组件专注于自身结构与内部逻辑，而将内容的最终渲染权完全交还给父组件。深入理解并灵活运用插槽体系，是构建真正可扩展、高灵活组件库的必经之路。

匿名插槽：最基础却最常用的内容占位符

匿名插槽，顾名思义即不带 name 属性的 。它是 Vue 组件中最简单、应用最广泛的插槽形式，每个子组件最多只能拥有一个。其核心价值在于“无感接入”：父组件无需任何额外声明，只需将内容直接放置在子组件标签内部，这些内容便会自动流入这个默认出口。

为提升组件的健壮性，可在子组件中为匿名插槽设置后备内容，例如 暂无内容。仅当父组件未传递任何内容时，这段后备文字才会显示。需要特别注意的是，匿名插槽内的所有变量均来自父组件的作用域，它无法直接访问子组件内部的数据。

• 典型场景：卡片、按钮、模态框等通用容器型组件。
• 结构保持：若父组件传入多个子元素，它们会被整体包裹进同一个 节点，原有的 DOM 结构完整保留。
• 语法演进：在 Vue 3 中，匿名插槽可简写为 ，语义更清晰简洁。

具名插槽：实现多区域内容精准投放

当组件结构趋于复杂，需要多个可定制的区域（如典型的 Header、Sidebar、Footer 布局）时，匿名插槽便显得力不从心。此时必须借助 name 属性区分不同插槽，实现内容的精准分发。

在子组件中，通过 定义对应位置。父组件则使用 的语法，将内容“投放”到指定插槽。具名插槽的强大之处还体现在对动态绑定的支持上，例如 配合响应式变量，可轻松实现布局切换、权限控制等动态渲染场景。

• 命名建议：推荐使用 header、actions 等语义化名称，避免 left、top 这类易受布局调整影响而产生歧义的词。
• 默认插槽共存：匿名插槽本质上可视为名为 default 的具名插槽，两者可共存。父组件可使用