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