我正在使用 props
将对象的克隆从父组件传递到子组件,但是当我更改对象中的 status
属性的值时父组件 子组件得到通知并更改“克隆”对象中 status
属性的值。
我读过Object.assign()
方法,它只进行浅层复制,但奇怪的是我的对象属性是原始类型 String 意思它们应该按值而不是按引用复制,我什至尝试手动分配值并尝试如下所示的 JSON 方式,但没有像我预期的那样工作。
父组件:AppServers
<template>
<div>
<AppServerStatus v-for="server in servers" :serverObj="JSON.parse(JSON.stringify(server))">
</AppServerStatus>
<hr>
<button @click="changeStatus()">Change server 2</button>
</div>
</template>
<script>
import AppServerStatus from './AppServerStatus';
export default {
name: "AppServers",
components: {
AppServerStatus
},
data() {
return {
servers: [
{
name: 'server1',
status: 'Critical'
},
{
name: 'server2',
status: 'Normal'
},
{
name: 'server3',
status: 'abnormal'
},
{
name: 'server4',
status: 'idle'
},
{
name: 'server5',
status: 'Good'
},
],
serverTmp: {}
}
},
methods: {
changeStatus(){
this.servers[1].status = 'Active';
}
}
}
</script>
子组件:AppServerStatus
<template>
<div>
<h3>Server Name: {{ serverObj.name }}</h3>
<p>Server Status: {{ serverObj.status }}</p>
<hr>
</div>
</template>
<script>
export default {
name: "AppServerStatus",
data() {
return {
status: 'Critical'
}
},
props: [
'serverObj'
]
}
</script>
当我在父组件中执行 changeStatus()
时,我希望子组件对象中的 status
属性值保持正常组件,但它也会发生变化。
最佳答案
在 created
或 mounted
上从 serverObj
属性创建一个新对象,以防止不必要的 react 。
<template>
<div>
<h3>Server Name: {{ server.name }}</h3>
<p>Server Status: {{ server.status }}</p>
<hr>
</div>
</template>
<script>
export default {
name: 'AppServerStatus',
data() {
return {
status: 'Critical',
server: {
name: '',
status: ''
}
}
},
props: [
'serverObj'
],
mounted() {
this.server = {
name: this.serverObj.name,
status: this.serverObj.status
};
}
}
</script>
关于javascript - Javascript 对象的深拷贝在 Vue.js 中没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56293683/