Question

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

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 才能从＆lt;更新输入＆GT;每次组件收到新的 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的内部观察者，从而破坏其反应性。

这是我的解决方法：

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">'
})

我在这里做的是make destinationValue 一个内部带有 auxiliarKey 的对象来保存结果值，然后只修改的观察者函数中的该子项> originValue 道具。这是有效的，因为当我的观察者的功能覆盖其中的 auxiliarKey 时，Vue的 destinationValue 键上的内部观察者会被保留。

我无法使用计算属性，因为2路数据绑定（v模型）似乎不适用于计算属性，仅适用于数据。

你们知道是否有更清洁的方法吗？一个不会强迫我创建 auxiliarKey 子项？

提前Ty。

Answer 1

使用computed property。

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

在您的评论/修改后

据我了解，您希望使用v-model绑定到自定义组件。 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绑定的概念，以便您可以使用value属性以外的其他内容input事件。

Vue.js：重新计算并重新渲染数据＆＃39;基于＆＃39; prop＆＃39;更改。这是更好的方法吗？

1 个答案: