Vue组件插槽通过具名插槽解耦数据统计卡片结构与图表内容，支持图表区域自定义替换与上下文数据传递，并可组合默认/具名/ footer 插槽实现混合布局，图表组件自身亦可嵌套插槽增强定制能力。
Vue 组件插槽实现数据统计卡片中趋势图表的自定义模板分发，核心在于用具名插槽解耦结构与内容，让图表区域可替换、可扩展，同时保持卡片整体样式和交互逻辑统一。
用具名插槽分离图表容器与图表类型
StatsCard 组件不直接内建 ChartCard，而是预留 <slot name="chart"></slot> 位置。这样父组件可自由传入任意图表组件（如基于 Chart.js 的折线图、ECharts 柱状图，甚至带加载状态的封装图表），而无需修改 StatsCard 源码。
- 子组件 StatsCard.vue 中定义：
<div class="stats-card"><br> <!-- 其他 header/content/footer --><br> <div class="chart-area"><br> <slot name="chart"></slot><br> </div><br></div>
- 父组件按需注入：
<stats-card><br> <template #chart><br> <line-chart :data="salesData" /><br> </template><br></stats-card>
通过作用域插槽传递图表上下文数据
当图表需要访问卡片级指标（如“今日销售额”数值、时间范围、对比基准）时，StatsCard 可在插槽中暴露这些数据，让子图表组件灵活消费。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- StatsCard 内部写法：
<slot name="chart" :value="currentValue" :delta="deltaPercent" :period="timeRange"></slot> - 父组件使用时解构：
<template #chart="{ value, delta, period }"><br> <area-chart<br> :base-value="value"<br> :trend-delta="delta"<br> :time-label="period"<br> /><br></template> - 避免图表组件硬编码依赖 StatsCard 的 props，提升复用性
组合默认插槽与具名插槽构建混合布局
一个完整趋势卡片常含「主指标 + 图表 + 小字说明」三部分。可用默认插槽承载主指标，具名插槽专供图表，footer 插槽放说明文字——各司其职，互不干扰。
立即学习“前端免费学习笔记（深入）”；
- 示例结构：
<stats-card><br> <!-- 默认插槽：主指标数字 --><br> <p class="stat-value">¥128,500</p><br> <p class="stat-desc">较昨日 +12.5%</p><br> <!-- 具名插槽：图表 --><br> <template #chart><br> <mini-line-chart :series="trendSeries" /><br> </template><br> <!-- footer 插槽：操作或说明 --><br> <template #footer><br> <small>近7日趋势 · 数据每5分钟更新</small><br> </template><br></stats-card>
- StatsCard 内部按 slot 名分别渲染，不耦合内容逻辑
图表组件自身也支持插槽以增强定制能力
像 ChartCard 这类图表组件，本身也可设计插槽（如 #legend、#tooltip），让业务层进一步覆盖图例样式或提示文案，形成“插槽嵌套”的灵活链路。
- 例如：
<chart-card chart-type="line" :data="chartData"><br> <template #legend><br> <custom-legend :items="legendItems" /><br> </template><br></chart-card>
- 这种层级插槽让 UI 定制深入到图表内部细节，而不破坏图表组件的通用性
