Vue中V-Calendar的vc-date-picker如何随起止日期变更刷新？

问题原因 #

你当前的代码中，data里的range仅在组件初始化时从calendarRange props获取一次值。当父组件的calendarRange变化时，子组件的range不会自动同步，导致日期选择器无法更新显示。

解决方案一：监听props变化更新range #

通过watch监听calendarRange的变化，实时更新子组件的range对象：

<template>
    <div>
        <vc-date-picker v-model="range" is-range/>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            range: {
                highlight: true,
                start: this.calendarRange.start,
                end: this.calendarRange.end,
            },
        }
    },
    props: ['calendarRange'],
    watch: {
        // 深度监听对象内部属性变化
        calendarRange: {
            deep: true,
            handler(newRange) {
                // 更新range，保留原有highlight属性
                this.range = {
                    ...this.range,
                    start: newRange.start,
                    end: newRange.end
                };
            }
        }
    }
}
</script>

解决方案二：使用计算属性实现双向绑定 #

如果需要子组件的日期选择操作同步回父组件，推荐用计算属性替代data中的range，自动响应props变化并支持双向绑定：

<template>
    <div>
        <vc-date-picker v-model="range" is-range/>
    </div>
</template>
  
<script>
export default {
    props: ['calendarRange'],
    computed: {
        range: {
            get() {
                return {
                    highlight: true,
                    start: this.calendarRange.start,
                    end: this.calendarRange.end
                };
            },
            set(newRange) {
                // 将子组件的修改同步到父组件
                this.$emit('update:calendarRange', {
                    start: newRange.start,
                    end: newRange.end
                });
            }
        }
    }
}
</script>

此时父组件需要用v-model:calendarRange绑定属性（Vue 2中可使用.sync修饰符）：

<!-- 父组件中 -->
<DatePickerComponent v-model:calendarRange="parentRange" />

说明 #

• 方案一适合仅需要父组件更新子组件日历显示的场景；
• 方案二更适合需要双向同步父子组件日期范围的场景，符合Vue的单向数据流原则。

内容的提问来源于stack exchange，提问作者Anna Schmidt