Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题

Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

vue开发过程中，父组件通过props传值给子组件，子组件在页面展示父组件的值，在操作子组件值以后，即使不点击确定按钮，父组件中的值也发生了变化，但是需求是操作子组件数据以后，必须点击’确定’按钮以后才能修改父组件的值，否则父组件和子组件的值都不可以变化。
为了解决这一问题，当父组件传值给子组件以后，我通过
JSON.parse(JSON.stringify(data ))将父组件的数据进行拷贝，然后赋值给子组件中this.targetdData,子组件操作也是改变的this.targetData的值，而不会改变父组件的值，当点击‘’确定‘’按钮时，通过$emit调用父组件中的函数，将修改后的this.targetData值给了父组件，修改父组件中的值，当再次进入子组件的时候，会重新把修改后的值拷贝给子组件进行展示就可以解决上述问题了。
拷贝父组件的值：

this.targetData = JSON.parse(JSON.stringify(this.targetDataPar))

调用父组件方法

this.$emit('changeData', this.targetData)
changeData(val) {
            this.targetChanged = val;
      },

子组件拷贝父组件可用以下方式：

1. JSON.parse(JSON.stringify(data ))
2. Object.assign方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象
   解释：

const target = { a: 1 };
        const source1 = { b: 2 };const source2 = { c: 3 };
        Object.assign(target, source1, source2);
        target // {a:1, b:2, c:3}

    Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
    注意：
    Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

const obj1 = {a: {b: 1}};const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

参考链接：https://www.jianshu.com/p/d5f572dd3776
可参考深入理解JavaScript的深拷贝和浅拷贝：
https://www.cnblogs.com/dinghuihua/p/6674719.html

欢迎关注公众号，有你想要的前端知识：