高复用卡片组件的插槽布局核心是分离固定结构与可变内容：默认插槽承载主内容，具名插槽（header/footer）划分高频定制区，作用域插槽传递动态数据，props 负责基础视觉配置。
高复用卡片组件的插槽布局，核心是把“固定结构”和“可变内容”彻底分开。不是堆 props 控制显隐，而是用插槽预留位置，让使用者决定往哪塞什么结构。
默认插槽放主内容区
这是卡片最灵活的部分，承载差异化最大的区域——可能是纯文本、表单字段、图表容器，甚至嵌套子卡片。在组件模板里只写一个 <slot></slot>，不加 name，也不包逻辑。它天然支持任意 HTML、组件或指令（如 v-for），无需额外判断。外部使用时直接把内容写在组件标签内部即可，语义清晰，零学习成本。
具名插槽划分头部与底部
用 name="header" 和 name="footer" 明确切出两个高频定制区：
- header 插槽适合放标题、操作按钮（刷新/导出）、筛选器、日期选择器等——结构多变但位置固定
- footer 插槽常用于状态提示、说明文字、分页器或操作按钮组，支持按需显示或完全省略
父组件通过 <template></template> 和 <template></template> 精准投递，互不干扰。即使某个页面不需要 header，只要不传该插槽内容，子组件内对应区域就自然留空，不用靠 v-if 控制显隐。
立即学习“前端免费学习笔记（深入）”；
作用域插槽传递动态数据
当卡片需要根据内部状态渲染不同内容时，比如展示带格式的数值、带图标的描述、或条件性高亮的指标，就用作用域插槽。例如在子组件中写：<slot name="description" :text="cardDesc" :level="priority"></slot>。父组件接收后可自由决定怎么展示：<template text level><span :class="'desc-'+level">{{ text }}</span></template>。这样数据由子组件管理，样式和结构由父组件控制，职责分明。
配合 props 做基础定制
插槽负责结构，props 负责基础配置。比如通过 size 控制卡片尺寸类名，bordered 控制边框开关，shadow 控制阴影等级。这些不影响内容组织方式，只影响视觉层，用 props 更轻量、更易类型校验，也避免把简单样式逻辑塞进插槽里。
