Vue未传modelValue prop时，$watch内触发update:modelValue无法更新的解决办法

问题分析 #

你的组件模板直接使用modelValue prop渲染数据，但当父组件仅绑定v-model:string-value、未传入modelValue时，组件内部的modelValue始终是默认的undefined。原因在于Vue的props是单向数据流，update:modelValue事件本质是通知父组件修改绑定变量，若父组件未绑定对应变量，该事件不会反向更新组件内部的props值。

解决方案：用内部状态维护显示值 #

我们可以在组件内部定义一个响应式变量，独立维护要显示的model值，同时兼顾props传入的情况：

1. 定义内部状态innerModelValue，初始化时优先使用传入的modelValue prop，无传入则设为默认值（如null）
2. 监听modelValue prop的变化，同步到内部状态（处理父组件主动更新的场景）
3. 监听stringValue变化时，先更新内部状态，再触发update:modelValue事件通知父组件

修改后的组件代码（Composition API） #

import { defineComponent, ref, watch } from 'vue';
import moment from 'moment';

export default defineComponent({
    template: '<div>{{ innerModelValue }}</div>',
    props: {
        modelValue: { type: Date },
        stringValue: { type: String },
    },
    emits: ['update:modelValue', 'update:stringValue'],
    setup(props, { emit }) {
        // 内部状态，初始化优先取props值，无则设为null
        const innerModelValue = ref(props.modelValue ?? null);

        // 监听props的modelValue变化，同步到内部状态
        watch(() => props.modelValue, (newVal) => {
            innerModelValue.value = newVal ?? null;
        });

        // 监听stringValue变化，更新内部值并触发事件
        watch(() => props.stringValue, (n) => {
            let value = n == null ? null : moment(n, Format.NewMomentDate).toDate();
            innerModelValue.value = value;
            emit('update:modelValue', value);
        }, { immediate: true });

        return { innerModelValue };
    }
});

兼容Options API的写法 #

如果偏好使用Options API，也可以用data定义内部状态，配合watch选项实现：

export default defineComponent({
    template: '<div>{{ innerModelValue }}</div>',
    props: {
        modelValue: { type: Date },
        stringValue: { type: String },
    },
    emits: ['update:modelValue', 'update:stringValue'],
    data() {
        return {
            innerModelValue: this.modelValue ?? null
        };
    },
    watch: {
        modelValue(newVal) {
            this.innerModelValue = newVal ?? null;
        },
        stringValue: {
            handler(n) {
                let value = n == null ? null : moment(n, Format.NewMomentDate).toDate();
                this.innerModelValue = value;
                this.$emit('update:modelValue', value);
            },
            immediate: true
        }
    }
});

方案优势 #

• 内部状态innerModelValue完全由组件自主控制，无论父组件是否传入modelValue，都能正常更新和显示
• 当父组件传入modelValue时，通过监听props变化保证双向绑定的一致性
• update:modelValue事件仍能正常通知父组件更新绑定变量（若父组件使用了v-model绑定）

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