Vue插槽

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

一、插槽核心思想

插槽（Slot） 是 Vue 组件化的核心机制，用于实现 内容分发。它允许父组件向子组件传递 模板片段，使子组件具备更强的灵活性和复用性。插槽的核心价值在于：

• 组件结构定制：父组件可自定义子组件的部分内容
• UI 与逻辑解耦：子组件专注数据处理，父组件控制显示样式
• 高阶组件模式：实现渲染委托、作用域隔离等高级特性

二、基础插槽类型

1. 默认插槽（匿名插槽）

作用：接收父组件传递的 全部未命名内容

<!-- 子组件 ChildComponent.vue -->
<template><div class="card"><slot>默认内容（父组件未传内容时显示）</slot></div>
</template><!-- 父组件使用 -->
<ChildComponent><p>这里的内容会替换 slot 标签</p> 
</ChildComponent>

特性：

• 一个组件只能有一个默认插槽
• 支持设置默认内容（当父组件不传内容时显示）

2. 具名插槽（Named Slots）

作用：实现 多区块内容分发

<!-- 子组件 Layout.vue -->
<template><div class="container"><header><slot name="header"></slot></header><main><slot></slot>  <!-- 默认插槽 --></main><footer><slot name="footer"></slot></footer></div>
</template><!-- 父组件使用 -->
<Layout><template v-slot:header><h1>页面标题</h1></template><p>主内容区域（默认插槽）</p><template #footer>  <!-- 简