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> <!-- 简