提问人：pmpc 提问时间：11/10/2023 最后编辑：pmpc 更新时间：11/10/2023 访问量：43
如何使用 Vue 2.0 响应式使用对象？
How to use Vue 2.0 reactivity using objects?
问：
我有一个包含某些数据的父组件：
data: function() {
return {
initialItem: { name: "item", size: 10, description: "some text" }
currentItem: null
};
},
mounted() {
this.currentItem = _cloneDeep(item);
}
在父模板中，我作为道具传递：currentItem
<child-component :item="currentItem" @set-item=updateItem />
<button @click="discardChanges">Discard changes</button>
updateItem(item) {
this.currentItem = item
}
discardChanges() {
this.currentItem = this.initialItem
}
UI 中我想更新的项目位于子组件中，例如：
<input :value.sync="itemDetail.name" @click=emit('set-item') />
(...other similar inputs)
<script>
export const ChildComponent = {
props: {
item: {
type: Object,
required: true
}
},
data: function() {
return {
itemDetail: this.item
};
},
};
每当用户更改子组件中的属性时，都会向父组件发出一个事件，以便进一步保存它。
问题出在丢弃处理程序中，因为即使变量相应地更改了其属性，UI 也不会反映它。
我也尝试过在函数中使用 ，，但到目前为止，这些似乎都不起作用。discardChangesVue.set(...)this.$forceUpdate()this.currentItem = null; this.currentItem = this.initialItem;
有人可以指出我在这里可能缺少的内容，以便当有人单击丢弃按钮时，项目将返回到其初始值？
答：
1赞
Shinwi
11/10/2023
#1
发生这种情况的一个可能原因是，当您单击“放弃更改”按钮时，currentItem 的值将设置回其初始值，但该更改不会导致子组件呈现已更改的属性。
子组件将属性作为 prop 接收，并且不会创建响应式依赖项。因此，对父组件中 prop 的更改不会自动传播到子组件
您可以做的是在子组件中添加一个观察程序。一旦 prop 值发生变化，您也会在子组件中更新它。
因此，在您的子文件中，添加如下内容：
watch () {
item () {
this.itemDetail = this.item // deep copy if needed
}
0赞
Dr Fred
11/10/2023
#2
关键的更改技术可以解决问题，因为这将有助于重新渲染子组件。
- 向子组件添加一个键：
<child-component :key ="componentKey" :item="currentItem" @set-item=updateItem />
- 将 componentKey 属性添加到父组件数据中：
data: function() {
return {
initialItem: { name: "item", size: 10, description: "some text" }
currentItem: null,
componentKey: 1,
};
},
- 项目更改时更新密钥：
updateItem(item) {
this.currentItem = item
this.componentKey ++
}
discardChanges() {
this.currentItem = this.initialItem
this.componentKey ++
}
```
下一个：调用数组中对象的属性
评论