溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue組件傳值過程中丟失數據怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在實際項目中，假如使用了二次封裝的組件，并且封裝的組件內部做了一些屬性值的深拷貝操作，就有極有可能因為傳入的屬性值是引用類型的值，導致丟失部分數據。
以基于 el-table 封裝的 ak-table 組件為例：
往 ak-table 組件中傳入 row-key 屬性，該屬性可傳入一個函數：Function(row)，具體見官方文檔。
按理正常邏輯，傳入 ak-table 的屬性值應該原封不動地傳入到 el-table 組件中，但是奇怪的事情在這里發生了，我們傳入的函數在組件中消失了！
首先傳入 ak-table 的 row-key 屬性的值，它是一個函數，即引用類型值，那么根據文章開頭所說，如果對引用類型的值進行一般的深拷貝操作，是會丟失函數和數組等數據的。
在 ak-table 中，找到 row-key 屬性，因為沒有在 props 中定義，所以應該是保存在組件的 attrs 屬性中。去到 mounted 方法，在此打印attrs屬性中。去到mounted方法，在此打印attrs 的值，看看拷貝前后的數據對比。
控制臺輸出
———————————————————————————————————————
問題到這里就很清晰了，首先，ak-table 組件內部其實是想對傳進來的屬性值做初始化操作，然后就對 $attrs 進行了深拷貝操作，拷貝之后就丟失了 row-key 屬性值，所以造成了數據丟失。
對于傳入引用類型的值，直接通過子組件的 props 屬性接收來自父組件的值，然后不對傳進來的值做處理，直接使用。
對于傳入引用類型的值，在拷貝時要‘特殊對待'，把需要用到的屬性值遞歸拷貝到新的變量中。
關于“Vue組件傳值過程中丟失數據怎么辦”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
