插槽是Vue实现组件内容分发的核心机制，通过具名插槽（如#header、#footer）让卡片组件的头部和尾部由父组件自定义，支持作用域插槽传递子组件数据，并需注意v-slot语法、位置限制及通信规范。
插槽（Slot）是 Vue 中实现组件内容分发的核心机制，用它可以让卡片组件的 Header 和 Footer 完全由使用者决定，而不是写死在组件内部。关键在于合理使用具名插槽，并在父组件中通过 <template></template> 和 <template></template> 注入自定义结构。
1. 基础卡片组件：声明具名插槽
在卡片组件（如 Card.vue）中，用 <slot name="header"></slot> 和 <slot name="footer"></slot> 占位，中间留一个默认插槽放主体内容：
- 不提供任何默认内容，保持“完全开放”，让使用者自主控制每个区域
- 如果希望有兜底文案（比如没传 header 时显示“信息卡”），可写成
<slot name="header">信息卡</slot> - 避免在插槽内部加过多样式或包裹元素，把样式控制权交给父组件更灵活
2. 父组件中注入自定义 Header 和 Footer
使用时直接在 <card></card> 标签内，用 template 搭配 v-slot:xxx 或简写 #xxx 注入内容：
<template><h3 class="card-title">用户资料</h3></template><template><button>保存</button></template>- 主体内容直接写在标签内（走默认插槽），例如一段简介文字或表单字段
- 支持传入任意合法 Vue 模板：组件、指令、v-if/v-for，甚至带响应式数据的表达式
3. 进阶技巧：作用域插槽传递数据
如果 Header 需要展示卡片内部状态（比如“共 5 条记录”），可在插槽上绑定属性，让父组件取用：
- 子组件中写：
<slot name="header" :count="itemCount" :loading="isLoading"></slot> - 父组件中写：
<template count loading>{{ loading ? '加载中...' : `共 ${count} 条` }}</template> - 这种写法把逻辑和展示分离，Header 的渲染逻辑仍在父组件，但数据来自子组件
4. 注意事项与常见避坑点
实际开发中容易忽略几个细节：
- Vue 3 中插槽统一用
v-slot指令，slot属性已废弃（Vue 2.6+ 推荐用v-slot） - 具名插槽必须写在组件标签内部，不能放在外部或条件语句块里（除非用
<template v-if></template>包裹整个template #xxx） - 多个同名插槽会按顺序覆盖（后写的生效），如需多处插入，应使用多个不同名插槽或动态插槽名
- 不要在插槽内容里直接修改子组件 props，应通过事件（
$emit）或 v-model 向上通信
插槽不是黑魔法，本质是模板占位 + 编译时内容移动。把 Header 和 Footer 抽出来，卡片就真正变成“容器型组件”，复用性和可维护性会明显提升。
