Vue日期选择器插槽设计需聚焦4类定制区域：标题栏（header）、周起始标识（weekdays）、日期单元格（date-cell）、底部操作区（footer）；每个插槽须职责明确、提供精确作用域数据、保留合理默认行为，并可通过provide/inject共享跨层级状态。
插槽（slot）是 Vue 中实现组件高度可定制的核心机制，用在日期选择器面板上，本质是把“不确定的 UI 结构”交给使用者决定，而组件只负责数据逻辑、交互控制与基础布局。关键不在“怎么写 slot”，而在“在哪留 slot、留几个、各自承担什么职责”。
按功能拆分插槽位置，避免过度抽象
一个实用的日期选择器面板通常需要 4 类可定制区域：
-
标题栏（header）：支持自定义年月切换按钮、标题文字、额外操作按钮（如“今天”、“清空”）；建议用具名插槽
slot="header"，传入时自动接收当前年月和切换方法。 -
周起始标识（weekdays）：允许替换周一到周日的文字或图标（例如中文/英文/缩写/emoji），用作用域插槽暴露
{ day: 'Mon', index: 0 }等数据。 -
日期单元格（date-cell）：最灵活的部分，应提供完整上下文：
{ date, isCurrentMonth, isToday, isSelected, isDisabled, isInRange }，让用户自由渲染背景、图标、徽标、多选状态等。 - 底部操作区（footer）：放置确认/取消按钮或自定义提交逻辑，插槽内可直接访问内部选中值和提交方法，避免重复取值或 emit。
用作用域插槽传递精确上下文，而非仅 DOM 节点
不要只传一个 date 对象就完事。比如日期单元格插槽，若只传原始 Date 实例，用户每次都要自己判断是否为今天、是否被禁用、是否在范围中——这违背了封装初衷。正确做法是内部预先计算好状态，统一透出：
<template #date-cell="{ date, state }">
<div :class="['cell', state.class]" @click="handleSelect(date)">
<span v-if="state.isToday" class="today-dot">•</span>
<span class="date-text">{{ date.getDate() }}</span>
<span v-if="state.isInRange && !state.isSelected" class="range-indicator">●</span>
</div>
</template>其中 state 是组件内部根据 props（如 disabledDate、range、modelValue）实时计算出的状态对象，保证插槽使用者无需重复逻辑。
保留默认行为，但允许完全接管
每个插槽都应有合理默认内容，确保不传插槽时组件仍可正常工作。例如：
- 不传
header插槽 → 显示带左右箭头的年月标题； - 不传
date-cell→ 渲染纯数字 + 基础样式（今日加粗、禁用置灰）； - 但一旦传入，组件就放弃该区域所有默认样式和事件绑定，只提供数据和基础容器（如包裹一层
div用于对齐），把交互控制权完全交出。
这样既降低使用门槛，又不牺牲定制深度。
配合 provide/inject 实现跨层级状态共享
当插槽内容较深（比如嵌套了自定义弹窗、联动筛选器），可能需要访问选择器内部状态（如当前视图月份、选中范围、禁用规则）。这时不要靠 props 层层透传，改用 provide 在根组件注入上下文：
// 日期选择器根组件 setup
const context = {
currentMonth: readonly(currentMonth),
selectedRange: readonly(selectedRange),
isDateDisabled: (d: Date) => props.disabledDate?.(d) ?? false,
selectDate: (d: Date) => { /* ... */ }
}
provide('DatePickerContext', context)插槽内容中可通过 inject('DatePickerContext') 拿到，实现轻量耦合下的深度协作，比如自定义快捷范围按钮直接调用 selectDate，无需 emit 再监听。
不复杂但容易忽略的是：插槽不是越多越好，而是每个插槽必须对应一个明确、稳定、边界清晰的定制维度。设计前先问——这个区域的样式/结构/交互，是否真的存在多种合理实现？如果答案是否定的，那就别留 slot，写死更可靠。
