本文已参与[新人创作礼]活动,一起开启掘金创作之路
vue开发过程中,父组件通过props传值给子组件,子组件在页面展示父组件的值,在操作子组件值以后,即使不点击确定按钮,父组件中的值也发生了变化,但是需求是操作子组件数据以后,必须点击’确定’按钮以后才能修改父组件的值,否则父组件和子组件的值都不可以变化。 为了解决这一问题,当父组件传值给子组件以后,我通过 JSON.parse(JSON.stringify(data ))将父组件的数据进行拷贝,然后赋值给子组件中this.targetdData,子组件操作也是改变的this.targetData的值,而不会改变父组件的值,当点击‘’确定‘’按钮时,通过$emit调用父组件中的函数,将修改后的this.targetData值给了父组件,修改父组件中的值,当再次进入子组件的时候,会重新把修改后的值拷贝给子组件进行展示就可以解决上述问题了。 拷贝父组件的值:
this.targetData = JSON.parse(JSON.stringify(this.targetDataPar))
原因是:Vue传递对象和数组是引用传递的,所以需要重新定义一个和父组件不同的对象