1. 先看需求

2. 常规实现

在页面中搞三个DatePicker的组件，分别绑定到这三个属性中，再另外定义三个变量来控制组件的显示与隐藏
Template部分省略，以下是js部分示例代码片段

const showDatepicker1 = ref(false)
function onSelectDate1 (date: string) {
    model.date1 = data
    // coding...
}
const showDatepicker2 = ref(false)
function onSelectDate2 (date: string) {
    model.date2 = date
    // coding...
}
const showDatepicker3 = ref(false)
function onSelectDate3 (date: string) {
    model.date3 = date
    // coding...
}

3. 合并一个控件动态切换

常规方法中思路清晰，可读性也很强，所以并不是说不好，只是感觉像是在常规逻辑判断中大量地使用if…else…，有点冗长拖沓。
我们可以通过区分不同属性上的点击事件来动态指定初始值以及最终赋值。

type DatetimePickerType = 'date1' | 'date2' | 'date3' | undefined

// 指向当前使用日期控件的字段
const datetimePickerKey = ref<DatetimePickerType>()

// 如果没有指定任何字段则表明当前未编辑，如果指定则表明要调用日期控件，并且知道是哪个字段在调用日期控件，绑定对应的属性值
const showDatetimePicker = computed<boolean>({
  set: (value: boolean) => {
    if (value === false) {
      datetimePickerKey.value = undefined
    }
  },
  get: () => Boolean(datetimePickerKey.value)
})

// 绑定到日期控件上的模型，因为是计算属性，所以是动态变化的，根据当前编辑的日期字段名称而变化
const datetime = computed<string | undefined>({
  set: (value?: string) => {
    model[datetimePickerKey.value!] = value
  },
  get: () => model[datetimePickerKey.value!]
})

// 多个日期选择属性上绑定同一个点击事件，并且将字段名为参数传过来，点击认证表明当前谁调用了日期控件，绑定对应的属性上
function onDatetimePicker (key: DatetimePickerType) {
  datetimePickerKey.value = key
}