如何在不修改vue3中的props的情况下使用props初始化状态

Question

我在vue 3组件中初始化状态，如下所示：

data() {
return {
new_listing: this.listing //which is a prop
}
}

然而，当我将其绑定到输入时，例如：

<input type="text" placeholder="title" v-model="new_listing.title" />

预期的结果是只有new_listing.title改变，然而道具listing似乎也改变了。如何使其仅更改状态new_listing.title而不更改道具listing.title。

Answer 1

您需要克隆对象(制作一个新副本(。

在javascript中，当将对象分配给变量时，它不会创建该对象的新副本。相反，它通过引用原始对象来指定它。

因此，根据问题中的代码，执行{ new_listing: this.listing }会将this.listing对象的引用分配给new_listing。意味着修改new_listing也会修改this.listing:

要在ES6+中克隆对象，可以执行以下操作。...是一种扩展语法。在这种情况下，这是一种克隆对象的方法。

data() {
return {
new_listing: {...this.listing} //which is a prop
}
}

如果您不使用ES6，请查看在JavaScript中深度克隆对象的最有效方法是什么？查看如何克隆对象。

注意：如果对象包含对象(例如{a: {b: "h"}}(，则需要进行深度克隆(克隆对象中的对象(。