Vue 不更新手表内的 modelValue

Question

如果我不通过 props 传递 modelValue，则在 $watch 中发出

update:modelValue

 事件不会更新 modelValue。如何在不通过 props 传递 modelValue 的情况下确保 modelValue 得到更新？

我的组件：

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

用途：

<MyComponent v-model:string-value="ValidUntil">
</MyComponent>

Answer 1

我认为这是由于对道具工作原理的误解。

第一个：道具是（应该被视为）只读的。

Vue 没有像 AngularJS 那样的双向绑定。它有两个单向绑定：道具和事件。

v-model

只是一种更好的语法：它既绑定了 prop 又绑定了事件监听器。

传统流程是这样的：

将反应数据绑定到
1. modelValue
在
2. update:modelValue 上绑定更新程序
触发
3. update:modelValue
更新程序被调用并更改您的反应数据
5. modelValue

   的 prop 值发生更改，组件重新渲染更改的部分

这里

update:modelValue

 被触发，但由于没有监听器，所以什么也不会发生。因此，

modelValue

仍然有其默认值：

undefined

。