Vue.js:根据 'data' 变化重新计算并重新渲染 'prop'。这是更好的方法吗？

Question

我有一个组件，它对来自数据 的某些值具有双向数据绑定(bind)。例如:

Vue.component ({
    data: ()=>({
        destinationValue: "1000"
    }),
    template: '<input v-model="destinationValue">'
})

现在，假设此组件接收一个名为 originValue 的prop，我想从中计算我的destinationValue。例如，如果转换比率等于 2，那么我可以这样做:

Vue.component ({
    props: ['originValue'],
    data: () => ({
        destinationValue: this.originValue* 2
    }),
    template: '<input v-model="destinationValue">'
})

这里的问题是，如果此组件接收到 originValue 属性的新值，destinationValue 的值将不会更新。

我需要 destinationValue 可以从 <input> 标签更新，但每次组件收到新的 originValue 时也会被覆盖。

为了尝试解决这个问题，起初我尝试了:

Vue.component ({
    props: ['originValue'],
    data: ()=>({
        destinationValue: this.originValue* 2
    }),
    watch: {
        originValue: function ( val, oldVal ) {
            this.destinationValue= val * 2
        }
    }
    template: '<input v-model="destinationValue">'
})

但这行不通。如果收到 originValue 的新值，该值将不会在模板中更新。这是因为在观察器函数内强制重新分配 destinationValue 将覆盖 Vue 在该键上的内部观察器，从而破坏其 react 性。

这是我的解决方法:

Vue.component ({
    props: ['originValue'],
    data: ()=>({
        destinationValue: {
            auxiliarKey: this.originValue* 2
        }
    }),
    watch: {
        originValue: function ( val, oldVal ) {
            this.destinationValue.auxiliarKey = val
        }
    }
    template: '<input v-model="destinationValue.auxiliarKey">'
})

我在这里所做的是让 destinationValue 成为一个对象，里面有一个 auxiliarKey 来保存结果值，然后只在 originValue Prop 。这是有效的，因为当我的观察者的函数覆盖其中的 auxiliarKey 时，Vue 在 destinationValue 键上的内部观察者被保留。

我无法使用计算属性，因为 2way 数据绑定(bind) (v-model) 似乎不适用于计算属性，仅适用于数据。

你们知道是否有更清洁的方法来做到这一点？一个不会强制我创建 auxiliarKey 子项的方法？

提前联系。

Answer 1

使用 computed property .

Vue.component ("x-two", {
    props: ['originValue'],
    computed: {
        destinationValue(){
            return this.originValue * 2;
        }
    },
    template: '<span>{{destinationValue}}</span>'
})

在您的评论/编辑之后

据我了解，您想使用 v-model 绑定(bind)到您的自定义组件。 v-model 只是 :value="myValue" 和 @input="myValue = $event" 的糖。要让您的组件支持 v-model，只需实现这两件事。

Vue.component ("x-two", {
    props: ['originValue', 'value'],
    computed: {
        destinationValue(){
            const newValue = this.originValue * 2;
            this.$emit('input',newValue);
            return newValue;
        }
    },
    template: '<span>{{destinationValue}}</span>'
})

然后在你的父模板中:

<x-two :origin-value="count" v-model="calculatedCount"></x-two>

其中 calculatedCount 是您父级的一些数据值。

Working example .

我应该提一下，the very latest version of Vue (截至今天)添加了自定义属性和事件 v-model 绑定(bind)的概念，这样您就可以使用 value 属性和 以外的东西输入事件。