当子属性更改时，强制 vue.js 刷新 prop

Question

我有一个绑定在对象上的组件，并且父组件更改其对象的属性。子组件应对更改做出反应。

子组件：

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component({
    props: {
        value: Object,
    }
})
class ValidatedSummaryComponent extends Vue {
    value: any;
    field = "Name";
    v: any;

    created() {
        console.log("!", this.value);
        this.v = this.value;
    }

    state: string | null = null;
    error = "";

    @Watch('value')
    onValueChanged(val: any, oldVal: any) {
        console.log("Value called", val);
        this.v = val;
        this.onChanged();
        this.$forceUpdate();
    }

    private onChanged() {
        if (typeof this.v.validationErrors[this.field] == 'undefined') {
            this.state = null;
            this.error = "";
        } else {
            this.state = 'invalid';
            this.error = this.v.validationErrors[this.field].join();
        }
    }
}

export default ValidatedSummaryComponent;

用法：

<ValidatedSummary v-bind:value="bindableObject"></ValidatedSummary>

然后我这样做：

bindableObject.Name = 'New name' 

我需要我的组件ValidatedSummaryComponent做出反应。

我可能可以将它绑定为一个单独的属性：

<ValidatedSummary v-bind:value="bindableObject.Name"></ValidatedSummary>

，但在最终设计中，组件应该监视 的所有属性BindableObject，并且会有一些不同的BindableObjects属性集，因此我不能只是逐个属性地绑定它。

我设法使其工作的唯一方法是强制 vue.js 更新整个对象，确保 vue.js 相等性检查不会通过：

this.bindableObject = Object.assign(new BindableObject(), this.bindableObject );

但这非常麻烦，因为我必须在每次更改时都这样做，所以我正在寻找更好的方法来处理这个问题。this.$forceUpdate();在上面的代码中删除也很好，但我可以忍受它。

Answer 1

好吧，只需进行强制更新即可。它会让你的生活更轻松

vm.$forceUpdate();

正如文档中提到的

强制 Vue 实例重新渲染。请注意，它不会影响所有子组件，只会影响实例本身和插入槽内容的子组件。

但是，仅当您没有其他选择时才建议使用它（仅作为最后一个选项）。

那么您可以使用哪些其他选项使其工作。（取决于代码设计）

1. 尝试使用 Vue.set()。或者，
2. 重新分配已更改的对象。