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

说明:

近日开发中碰见一个很诡异的问题, 父组件动态的修改对象 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 )) 两次转换后就解决了该问题;