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个同一个子组件，于