vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题_父组件多次引用同一个子组件会有什么问题-优快云博客

本文链接：https://blog.youkuaiyun.com/java123_PB/article/details/108315269

本文介绍了在Vue开发中遇到的一个关于父组件多次调用同一个子组件时，this取值出现错误的问题。通过分析发现，由于在不同组件实例中，this指向不同，导致数据获取不一致。解决方案是将使用that存储的引用更改为直接使用this，以确保获取到正确组件实例的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题

我们在开发vue项目的使用，会经常使用this这个关键字，this指向vue这个实例，我们可以使用this.来获取data里面的数据，但是在一些方法体内可能出现无法正常使用this,比如一些方法内，此时this指向的是这个方法函数，而不是vue，这是我们会定义一个变量that , let that = this; ,
今天我就碰到一个that的问题。
在这里插入图片描述

在这里插入图片描述

发现问题了没有，使用this和使用that，返回的数据完全不一样，可我明明在created函数内定义let that = this; this.i => 1; that.i => 4; this.class2 => '‘popup1", that.class2 =>’'popup4" 那为什么返回的数据完全不一样。
我们继续看代码
在这里插入图片描述
上面的代码就是图中 Popup.vue的代码，
我在index.vue父组件中同时引用了4个同一个子组件，于是就出现了上面说的问题。
这个问题有点类似于for循环中的var问题，
我调用了4次子组件，导致这个i就被赋值了4次，而that取的是最后一次i的值，而this是取每一个子组件内的i，而与其他的组件内的 i 无关，所以正确的做法是，将所有取值不正常的数据，由that取值改为this取值
问题解决：
在这里插入图片描述

而图中出现4次的打印的class2 popup 也印证了我的说法。
如果对你有帮助，请点了攒再周。谢谢。