Vue具名插槽

下面，我们来系统的梳理关于 Vue 具名插槽 的基本知识点：

---

一、具名插槽核心概念

1.1 什么是具名插槽？

具名插槽是 Vue 中用于多内容分发的机制，允许组件定义多个命名插槽区域，父组件可以精确控制内容分发的位置，实现高度灵活的组件内容定制。

1.2 具名插槽解决的问题

• 单一内容限制：解决默认插槽只能分发单一内容的问题
• 精确布局控制：实现组件内部多区域的内容分发
• 语义化模板：提高模板的可读性和可维护性

1.3 基础结构对比

<!-- 默认插槽 -->
<BaseCard><p>所有内容都会放入默认插槽</p>
</BaseCard><!-- 具名插槽 -->
<BaseCard><template #header><h3>标题区域</h3></template><p>主内容区域</p><template #footer><button>操作按钮</button></template>
</BaseCard>

二、具名插槽核心语法

2.1 组件定义具名插槽

<!-- LayoutComponent.vue -->
<template><div class="layout"><header><!-- 具名插槽定义 --><slot name="header"></slot></header><main><!-- 默认插槽 --><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

2.2 父组件使用语法

Vue 2 语法

<LayoutComponent><template slot="header"><h2>Vue 2 标题</h2></template><p>主内容区域</p><template slot="footer"><button>提交</button></template>
</LayoutComponent>

Vue 3 语法（推荐）

<LayoutComponent><template #header><h2>Vue 3 标题</h2></template><p>主内容区域</p><!-- 简写语法 --><template #footer><button>提交</button></template>
</LayoutComponent>

2.3 动态插槽名

<template><DynamicComponent><template #[dynamicSlotName]>{{ dynamicContent }}</template></DynamicComponent>
</template><script>
export default {data() {return {dynamicSlotName: 'header',dynamicContent: '动态内容'}}
}
</script>

三、高级具名插槽技术

3.1 插槽作用域控制

<!-- 子组件 -->
<template><div class="card"&g