vue3父子传参对象,子组件如何正确修改对象???

279 阅读1分钟

在最近学习vue3的组件化时,发现了父子组件传参中这样一个问题。vue3不推荐子组件直接修改父组件传递的参数,需要使用emit去修改。

但在某些业务场景下,例如将一个复杂表单分为若干个组件,这些组件共用一个form对象,组件里分别管理着form的部分属性。在最开始我直接修改props里的form属性,并没有报错但是不推荐。接下来我使用了第二种写法:

image.png

利用watch去将传递的对象拷贝到子组件所定义的对象中,但我发现也直接修改了父组件传递的对象,因为只是赋值了对象的内存地址。最后我想到了利用深拷贝,JSON.parse(JSON.stringify(newValue.modelValue)) 又出现了问题,页面卡死并且报错了

[Vue warn]: Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

希望各位大神能给我一个解决方法。