前言

在上一篇文章 javascript 中的兩種資料型別中，分別介紹了基本型別和引用型別，以及引用型別的淺拷貝與深拷貝。這裡需要注意的是，該qYnSqHF文章中深拷貝引用型別值的方法，並不是完美的，引用型別值中的某些屬性值，仍不能完整地複製到新的變數中。比如函式值，在深拷貝過程中，就會丟失。

問題

在實際專案中，假如使用了二次封裝的元件，並且封裝的元件內部做了一些屬性值的深拷貝操作，就有極有可能因為傳入的屬性值是引用型別的值，導致丟失部分資料。

舉例

以基於 el-table 封裝的 ak-table 元件為例：

往 ak-table 元件中傳入 row-key 屬性，該屬性可傳入一個函式：Func

按理正常邏輯，傳入 ak-table 的屬性值應該原封不動地傳www.cppcns.com入到 el-table 元件中，但是奇怪的事情在這裡發生了，我們傳入的函式在元件中消失了！

問題分析

首先傳入 ak-table 的 row-key 屬性的值，它是一個函式，即引用型別值，那麼根據文章開頭所說，如果對引用型別的值進行一般的深拷貝操作，是會丟失函式和陣列等資料的。

在 ak-table 中，找到 row-key 屬性，因為沒有在 props 中定義，所以應該是儲存在元件的 attrs 屬性中。去到 mounted 方法，在此列印attrs屬性中。去到mounted方法，在此列印attrs 的值，看看拷貝前後的資料對比。

控制檯輸出

———————————————————————————————————————

問題到這裡就很清晰了，首先，ak-table 元件內部其實是想對傳進來的屬性值做初始化操作，然後就對 $attrs 進行了深拷貝操作，拷貝之後就丟失了 row-key 屬性值，所以造成了資料丟失。

解決方案

對於傳入引用型別的值，直接通過子元件的 props 屬性接收來自父元件的值，然後不對傳進來的值做處理，直接使用。

對於傳入引用型別的值，在拷貝時要‘特殊對待'，把需要用到的屬性值遞迴拷貝到新的變數中。

總結

對於 javaScripqYnSqHFt 中的基本型別和引用型別，以及對引用型別值拷

到此這篇關於vue元件傳值過程中丟失資料的分析與解決方案的文章就介紹到這了,更多相關Vue元件傳值丟失資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

參考連結：JavaScript深拷貝的一些坑