Vue 3 中 v-model 绑定日历组件需接收 modelValue prop 并通过 $emit('update:modelValue', value) 触发更新，父组件用 ref 响应式变量绑定；支持多字段时推荐 v-model:start/v-model:end 或对象式 v-model="scheduleRange"。
在 Vue 3 中，v-model 绑定日历日程组件的选择值，本质是利用其“语法糖”特性：自动映射为 :modelValue + @update:modelValue。关键在于组件内部要正确触发更新事件，并对外暴露响应式 prop。
确保日历组件支持 v-model
你的日历日程组件（比如自定义的 CalendarSchedule.vue）需满足：
- 接收名为
modelValue的 prop（类型建议为Date | string | number | null，根据实际选中值类型决定） - 在用户点击/选择某天或某时段后，通过
$emit('update:modelValue', newValue)通知父组件 - 推荐使用
defineProps和defineEmits（组合式 API）显式声明
父组件中正确使用 v-model
假设你希望双向绑定选中的日期（如点击某天后高亮并同步到数据）：
<CalendarSchedule v-model="selectedDate" />
对应脚本中：
立即学习“前端免费学习笔记（深入）”；
const selectedDate = ref(null) // 初始可为空，或设为 new Date()
当组件内部触发 update:modelValue 时，selectedDate.value 会自动更新；反之，若你在 JS 中修改 selectedDate.value，组件也应响应式更新 UI（需监听 modelValue 变化并重置内部状态）。
进阶：支持多个绑定字段（如开始时间 + 结束时间）
若日程需同时选中「起始日期」和「结束日期」，不建议强行用单个 v-model。更合理的方式是：
- 使用多个独立绑定：
v-model:start="startTime"和v-model:end="endTime" - 组件内分别声明
start、endprop，并各自 emitupdate:start/update:end - 或封装为对象绑定：
v-model="scheduleRange"，其中scheduleRange = { start: ..., end: ... }，组件内部解构处理并 emit 整体更新
注意点与常见问题
• 如果使用第三方日历库（如 vue3-fullcalendar 或 v-calendar），请查阅其文档是否原生支持 v-model —— 多数现代组件已适配 Vue 3 的这一约定。
• 避免在组件内部直接修改 props.modelValue（会报错），所有变更必须通过 emit。
• 时间格式统一很重要：前后端交互常用 ISO 字符串（'2024-05-20' 或 '2024-05-20T09:00:00'），建议组件内部做标准化转换再 emit。
