一聚教程网:一个值得你收藏的教程网站

热门教程

Vue组件传值过程中丢失数据的分析与解决方法

时间:2022-06-29 00:54:50 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下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 属性接收来自父组件的值,然后不对传进来的值做处理,直接使用。

对于传入引用类型的值,在拷贝时要‘特殊对待',把需要用到的属性值递归拷贝到新的变量中。

热门栏目