說明:
近日開發中碰見一個很詭異的問題, 父組件動態的修改對象 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 )) 兩次轉換后就解決了該問題;