vue中子組件直接修改父組件prop屬性bug

在有些時候,子組件直接修改父組件傳來的 prop 對象的屬性會出現不同步的問題。

比如,父組件傳過來的一個對象 checkBoxObj:

checkBoxObj:{
    checked: false
}

checked 通過v-model綁定給子組件的 checkbox,然後點擊這個checkbox,試圖改變 checked 的值,但是有時候會發現 checkbox 的選中狀態和 checked 相反,也就是不同步的問題。

(嘗試)解決辦法

將prop的checkBoxObj值賦值給data的一個值checkBoxData

this.checkBoxData = this.checkBoxObj;

由於是直接賦值,也存在引用關係,修改checkBoxDatachecked就相當於修改了checkBoxObjchecked。於是這個bug不在出現。

然後直接修改這個checkBoxData的checked屬性值,不要直接修改prop傳過來的值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章