这篇文章将为大家详细讲解有关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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
