vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

Posted 2021-02-14 aoqizhonghua

说明：

近日开发中碰见一个很诡异的问题，  父组件动态的修改对象 data 中的值， 然后将这个对象 data 传给子组件， 子组件拿到后将 data 中的值 乘以 100 ，发现父组件中的值也跟着变化了，通过查阅资料，发现 是 VUE 双向绑定中的一个bug，就此给出解决办法，亲测有效

 

情景描述：

对象  data = {

　　price: 0,

　　flag: true,

　　name: " 哈哈 "

}

父组件 更改 data.parice = 100,   然后将 data对象 传给子组件， 子组件接收到对象data ，  将data.price * 100,  接口调用完成后， 父组件中的data.price 变成了   10000；

 

解决办法：

1、不给子组件传对象，传个子组件单独的一个 price 值；

2、可以传对象 data， 需要将 data 处理，  JSON.parse(JSON.stringify(data ))  两次转换后就解决了该问题；