Vue 组件插槽如何实现数据统计卡片中趋势图表的自定义模板分发

Vue组件插槽通过具名插槽解耦数据统计卡片结构与图表内容，支持图表区域自定义替换与上下文数据传递，并可组合默认/具名/ footer 插槽实现混合布局，图表组件自身亦可嵌套插槽增强定制能力。

Vue 组件插槽实现数据统计卡片中趋势图表的自定义模板分发，核心在于用具名插槽解耦结构与内容，让图表区域可替换、可扩展，同时保持卡片整体样式和交互逻辑统一。

用具名插槽分离图表容器与图表类型

StatsCard 组件不直接内建 ChartCard，而是预留 <slot name="chart"></slot> 位置。这样父组件可自由传入任意图表组件（如基于 Chart.js 的折线图、ECharts 柱状图，甚至带加载状态的封装图表），而无需修改 StatsCard 源码。

1. 子组件 StatsCard.vue 中定义：

   <div class="stats-card">

   <!-- 其他 header/content/footer -->

   <div class="chart-area">

   <slot name="chart"></slot>

   </div>

   </div>

2. 父组件按需注入：

   <stats-card>

   <template #chart>

   <line-chart :data="salesData" />

   </template>

   </stats-card>

通过作用域插槽传递图表上下文数据

当图表需要访问卡片级指标（如“今日销售额”数值、时间范围、对比基准）时，StatsCard 可在插槽中暴露这些数据，让子图表组件灵活消费。

1. StatsCard 内部写法：

   <slot name="chart" :value="currentValue" :delta="deltaPercent" :period="timeRange"></slot>

2. 父组件使用时解构：

   <template #chart="{ value, delta, period }">

   <area-chart

   :base-value="value"

   :trend-delta="delta"

   :time-label="period"

   />

   </template>

3. 避免图表组件硬编码依赖 StatsCard 的 props，提升复用性

组合默认插槽与具名插槽构建混合布局

一个完整趋势卡片常含「主指标 + 图表 + 小字说明」三部分。可用默认插槽承载主指标，具名插槽专供图表，footer 插槽放说明文字——各司其职，互不干扰。

1. 示例结构：

   <stats-card>

   <!-- 默认插槽：主指标数字 -->

   <p class="stat-value">¥128,500</p>

   <p class="stat-desc">较昨日 +12.5%</p>

   <!-- 具名插槽：图表 -->

   <template #chart>

   <mini-line-chart :series="trendSeries" />

   </template>

   <!-- footer 插槽：操作或说明 -->

   <template #footer>

   <small>近7日趋势 · 数据每5分钟更新</small>

   </template>

   </stats-card>

2. StatsCard 内部按 slot 名分别渲染，不耦合内容逻辑

图表组件自身也支持插槽以增强定制能力

像 ChartCard 这类图表组件，本身也可设计插槽（如 #legend、#tooltip），让业务层进一步覆盖图例样式或提示文案，形成“插槽嵌套”的灵活链路。

1. 例如：

   <chart-card chart-type="line" :data="chartData">

   <template #legend>

   <custom-legend :items="legendItems" />

   </template>

   </chart-card>

2. 这种层级插槽让 UI 定制深入到图表内部细节，而不破坏图表组件的通用性