在Vue中,如果一个组件的props是一个对象,那么我们在组件中进行传递时,实际上是传递了一个指向同一个对象的引用,而不是传递了一个新的对象。因此,在组件内部修改该对象的属性时,会影响到所有引用该对象的地方,包括父组件和其他子组件。同时,在父组件中修改该对象的属性时,也会影响到该组件的props。
为了解决这个问题,可以使用计算属性或者vue-watcher来监听props的变化,并在变化时重新赋值一个新的对象,而不是直接在原对象上进行修改。
具体实现可参考以下示例:
<template>
<div>
<p>对象属性:{{ objProp }}</p>
</div>
</template>
<script>
export default {
props: {
objProp: {
type: Object,
default: () => {}
}
},
computed: {
computedObjProp() {
return JSON.parse(JSON.stringify(this.objProp))
}
},
watch: {
objProp: {
deep: true,
handler(val){
this.computedObjProp = JSON.parse(JSON.stringify(val))
}
}
}
}
</script>
在上述示例中,我们首先通过计算属性 computedObjProp
返回一个深拷贝的 objProps
对象。然后,我们通过使用 watch
监听 objProp
的变化,当 objProp
改变时,我们通过重新赋值 computedObjProp
来使得组件能够正确响应props的变化。