Vue 组件通信如何通过 Props 传递日历事件数据在视图中高亮显示

Props 是 Vue 中父组件向子组件传递日历事件数据最直接、最常用的方式，需确保数据结构合理（如数组含 date 和 type 字段）、子组件构建高效日期索引（Set/Map）、模板中动态绑定高亮类名，并统一 YYYY-MM-DD 日期格式以保障匹配准确。

Props 是 Vue 中父组件向子组件传递日历事件数据最直接、最常用的方式。关键不是“传过去就行”，而是要确保：数据结构合理、子组件能正确识别日期并匹配高亮逻辑、视图渲染时能精准响应。

明确日历事件的数据结构

日历高亮依赖事件与日期的映射关系，建议用数组形式传递，每项包含 date（ISO 格式字符串或 Date 对象）和可选的 type（如 'holiday'、'meeting'、'deadline'），便于样式区分：

1. events: [{ date: '2026-07-28', type: 'meeting' }, { date: '2026-08-01', type: 'holiday' }]
2. 避免传复杂嵌套对象；若需更多字段（如标题、颜色），保持 date 字段可被快速解析为日期字符串即可

子组件接收并建立日期索引

在子组件中用 defineProps（Vue 3）或 props 选项（Vue 2）声明接收，并立即构建一个高效查找结构（如 Set 或 Map），避免每次渲染都遍历整个 events 数组：

1. 用 new Set(events.map(e => e.date.split('T')[0])) 提取所有日期字符串（如 '2026-07-28'）
2. 若需按类型差异化高亮，可用 Map： const eventMap = new Map(events.map(e => [e.date.split('T')[0], e.type]))
3. 该逻辑放在 setup() 或 computed 中，确保响应式更新时自动重建

模板中动态绑定高亮类名

在日历单元格（如每个 <td> 或日期按钮）上，通过判断当前渲染日期是否在事件集合中，动态添加 CSS 类：

1. <div :class="{ 'highlight': isEventDate(day), 'highlight-meeting': eventMap.get(day) === 'meeting' }">{{ day }}</div>
2. isEventDate(day) 可简单封装为 eventSet.has(day)，其中 day 是格式化后的 'YYYY-MM-DD' 字符串
3. CSS 中定义 .highlight { background-color: #ffeb3b; }、.highlight-meeting { border-left: 3px solid #2196f3; } 等视觉样式

注意日期格式统一与响应性

父组件传入的日期格式必须与子组件解析逻辑严格一致，否则匹配失败：

1. 推荐统一使用 YYYY-MM-DD 字符串（如 new Date().toISOString().slice(0, 10)）
2. 若父组件传的是 Date 对象，子组件需主动格式化：date.toISOString().slice(0, 10)
3. 确保 props 类型校验（如 type: Array、validator 检查每项含 date 字段），防止空数据或格式错误导致高亮失效