Vue卡片组件通过具名插槽实现Header/Footer自定义，支持默认内容回退与作用域插槽传参，结合defineSlots可增强TypeScript类型提示。

Vue.js 中通过 Slots（插槽） 实现卡片组件的 Header 与 Footer 自定义，是解耦结构与内容、提升组件复用性的常用方式。核心思路是：卡片组件只定义容器和布局，把头部、底部区域留给使用者决定渲染什么内容。

基础单个插槽实现 Header/Footer 替换

在卡片组件中使用 <slot> 占位，默认插槽会接收父组件中所有未命名的内容。但这种方式无法区分 Header 和 Footer —— 所有内容都塞进一个位置。

更合理的方式是使用 具名插槽（Named Slots）：

• 在卡片组件（如 Card.vue）模板中，为头部和底部分别定义：
  <header><slot name="header"></slot></header>
<footer><slot name="footer"></slot></footer>
• 父组件使用时，通过 v-slot:xxx（或简写 #xxx）指定内容注入到对应位置：
  

  <Card><br>  <template #header><h2>我的标题</h2></template><br>  <p>这里是卡片主体</p><br>  <template #footer><button>操作按钮</button></template><br></Card>

默认内容 + 插槽回退（Fallback）

当父组件没传 Header 或 Footer 时，可提供默认文案或结构，避免空白：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

• 在 <slot name="header"> 内直接写默认内容：
  <slot name="header"><h3>默认标题</h3></slot>
• Vue 会自动判断：若父组件传了 #header，则渲染传入的内容；否则渲染 slot 标签内的默认内容。

作用域插槽传递数据（如动态 Footer 按钮）

如果 Footer 需要访问卡片内部状态（例如 item.id、loading 状态），可用 作用域插槽：

• 在卡片组件中，把数据作为属性传给插槽：
  <slot name="footer" :id="itemId" :loading="isLoading"></slot>
• 父组件使用时解构接收：
  

  <template #footer="{ id, loading }"><br>  <button :disabled="loading">删除 {{ id }}</button><br></template>

组合式 API 中的插槽类型提示（TypeScript 友好）

使用 defineSlots 可为插槽提供类型声明，提升开发体验：

• 在 Card.vue 的 <script setup> 中添加：
  

  defineSlots<{<br>  header: (props: { title?: string }) => any,<br>  footer: (props: { disabled?: boolean }) => any<br}>();

• 这样在父组件使用 #header 时，IDE 就能提示 props 参数类型。