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

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 也印证了我的说法。
如果对你有帮助，请点了攒再周。谢谢。