問題場景：
查詢完表格數據后 通過作用域插槽，將該行數據傳到修改頁面（定義了個新對象存儲數據），但是由于數據雙向綁定，修改這個新對象的值，會影響到最初查詢表格獲取的值

如下

this.editForm = row

解決方案：
方法1：通過json之間的解析，深拷貝創建一個與row無綁定關聯的臨時對象，再賦值給editForm

this.editForm = JSON.parse(JSON.stringify(row))

方法2：使用…展開運算符

this.editForm = {...this.editForm,...row}

方法3：$set也不會影響原數據，但只能操作單個數據，在上述場景可能不太適用（屬性多久麻煩了）

this.$set(this.editForm,'roleName',row.roleName) this.$set(this.editForm,'roleDesc',row.roleDesc)

這樣就不會影響到最初的row啦！
參考：https://blog.csdn.net/qq_40908105/article/details/121692798

總結

以上是生活随笔為你收集整理的解决vue双向绑定带来的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。