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

最新推荐文章于 2023-12-21 09:15:32 发布
最新推荐文章于 2023-12-21 09:15:32 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： vue this指针问题 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java123_PB/article/details/108315269
版权
本文介绍了在Vue开发中遇到的一个关于父组件多次调用同一个子组件时，this取值出现错误的问题。通过分析发现，由于在不同组件实例中，this指向不同，导致数据获取不一致。解决方案是将使用that存储的引用更改为直接使用this，以确保获取到正确组件实例的数据。
摘要由CSDN通过智能技术生成

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的代码，
我在in

最低0.47元/天 解锁文章
java123_PB
关注
专栏目录
vue 父组件中调用子组件函数的方法
10-16
在Vue中，子组件可以通过`this.$emit`触发一个事件，并将一些数据作为参数传递给父组件，而父组件则通过监听这个事件来响应子组件的行为。这种方式更符合Vue的单向数据流原则，有助于保持组件间独立和松耦合的关系。...
Vue多个父组件引用同一个子组件，子组件的$parent指向问题
m0_73095627的博客
10-16 1967
Vue多个父组件引用同一个子组件，子组件的$parent指向问题
vue —— 父组件同一时间多次调用子组件方法
Juliet_xmj的博客
12-23 2562
子组件方法 child.vue <div>{{msg}}</div> props: { msg: { type: String, default: '' } }, methods: { getData () { console.log(msg) } } 父组件 fa.vue 1.引入子组件 import child from './child' data () { return { list: [ { msg: 'hhhh', in
Vue子组件被同一个页面多次调用而引发的性能问题
最新发布
LuckyWinty的博客
12-21 1612
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群最近做的Vue2项目中，都涉及到一种场景，那就是一个组件（下称子组件）被同一个页面（下称父组件）多次调用。本来以为这个场景没啥，但是在实际做的过程，发现还是有必要注意一下的。需要注意的点在于：子组件在其生命周期中是否进行了接口请求，如果进行了接口请求，那子组件被父组件调用了几次，那这个接口就会被请求了几次。如果子组件每次被调用时请求的是不同...
一个vue页面引用同一个子组件两次，第二个不显示问题(已解决)
zc1713648120的博客
04-27 6925
一个页面引用同一个子组件两次，第二个不出现问题(已解决)
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 3536
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
vue 父组件调用子组件方法及事件
08-27
Vue 父组件调用子组件方法及事件 在 Vue 中，父组件调用子组件方法及事件是非常常见的需求，特别是在复杂的组件树中。今天，我们将详细介绍如何实现父组件调用子组件方法及事件。 父组件调用子组件方法 在上面的...
vue 使用ref 让父组件调用子组件的方法
08-28
Vue 使用 Ref 让父组件调用子组件的方法 Vue.js 是一个流行的前端框架，提供了许多强大的特性来帮助开发者快速构建应用程序。其中，使用 Ref 让父组件调用子组件的方法是 Vue.js 中一个非常有用的特性。本文将详细...
Vue子组件向父组件通信与父组件调用子组件中的方法
08-27
Vue 子组件向父组件通信是指子组件将数据或事件传递给父组件的过程，而父组件调用子组件中的方法则是指父组件可以调用子组件中的方法来实现某些功能。这两种方式都是 Vue 中常用的组件间通信方式。 子组件向父组件...
Vue父组件调用子组件事件方法
08-27
这里我们将详细介绍两种常见的Vue父组件调用子组件事件方法。 首先，我们需要理解Vue中的事件机制。Vue采用自定义事件系统来处理组件间的通信，这被称为“事件驱动”编程。组件可以通过`$emit`方法触发事件，而其他...
C++ - this指针用法
xd6905的博客
01-16 4995
this指针总结
vue 同一页面多次引用同一组件
热门推荐
ting0712的博客
11-03 1万+
vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖) 1:需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件; 2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据; 3:解决问题的关键: //1.-----页面调用子组件,实例化两个 //第一处调用子组件 <pagination @get-list="getpagequery" :...
vue父组件调用子组件方法this 指向问题_前端面试准备笔记系列之vue(03)
weixin_34795681的博客
01-26 1417
目录01. vue组件间的参数传递02. vue子组件调用父组件方法，父组件调用子组件方法03. 兄弟组件之间如何通讯？自定义事件正文01. vue组件间的参数传递父子组件传值父-》子 通过props子组件接收什么参数是有规则的，既可以是数组也可以是对象。子-》父 $emit向外触发一个事件注意：父组件可以随意向子组件传递参数，但是子组件不能反向修改父组件数据。单项数据流的概念。props特性：p...
vue父组件调用子组件的方法
lz的博客
07-05 1681
1.有A B C 一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一 1>.A—(1.绑定要要传的属性— :message=“message”) 2>.B—(1.用props接受这个属性— props:{message:String,required:true}) 一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一 1>.B—(...
【原型对象和原型链 （特别特别重要!!!!）&this指针&javascript代码错误处理&类的继承与实例化】
橙子的博客
06-01 280
☀️举个例子： ☀️上述的例子中的一段代码，可以看到后面的输出是true,可以知道原型对象共享方法。 图形解释，使理解更加深刻： 输出为true所以说，p1和p2对象它两共享了一个方法，因为原型对象共享方法，他俩的值一样，地址也一样，所以相等。☀️举个例子： 图解如下，使理解更加透彻： (1)构造方法名.prototype.constructor ☀️举个例子： (2)对象名.constructor ☀️举个例子： (3)引申：object是个基类，所有类是从它继承而来 (1)获取原型对象的原型对象:
this指针
Conquer_ALL的博客
11-01 302
- this指针基础介绍 =================this指针的由来==================== 一个学生可以有多本书一样，而这些书都是属于这个同学的；同理，如果有很多个同学在一起，那么为了确定他们的书不要拿混淆了，最好的办法我想应该就是每个同学都在自己的书上写上名字，这样肯定就不会拿错了。 同理，一个对象的多个成员就可看作是这个对象所拥有的书；而在很多个对象中间，我...
深入探讨this指针
LinuxEngineer的专栏
12-15 736
深入探讨this指针   为了写这篇文章，准备了好长时间，翻遍了箱底的书籍。但是现在还是不敢放开手来写，战战兢兢。不是担心自己写错，而是唯恐自己错误误导别人。同时也希望这篇文章能给你一点收获。既然是深入探讨this指针，所以建议初学者，最好具有一定编译基础，调试基础。如果大家认为这片文章有不满的地方,就给我发信批评一下，以便及时修正。 关于this指针的描述我们一般从语言层次上讲； thi
Spring常见问题解决 - this指针造成AOP失效
Zong_0915的博客
08-22 1308
首先，不要在使用AOP的过程中，在增强方法的内部或者是业务代码上调用增强方法上，使用this指针。一旦有this.增强方法()代码的出现，你就要注意了，因为这会导致AOP功能失效。因为AOP的本质就是创建代理对象，而代理对象里面存储了原始对象的引用。被代理对象只负责执行那些新加入的逻辑（增强方法），而原函数的调用则是通过原始对象来执行的。因此在执行AOP过程中，执行原函数的时候，this指针指的是原始对象，而非被代理对象。故相当于原始对象.method()。
vue-中父组件传个子组件的值，会随着子组件的修改，进行改变问题处理（开发中所遇问题）
sassssiii的博客
06-07 1320
今天在项目中遇到一个比较稀奇的事情，当我先描述下，我使用了一个组件，组件里面值的改变在点击确定之后需要带会到父组件中，并且在点击打开组件的时候要求内容回显，这时我就将数据通过父子传值的方式给子组件传值，当我改变子组件值，还没有点击确定时，父组件的数据也发生了改变，后来发现这是由于所传的值是引用数据类型的原因，当然我们使用基本数据类型的时候，就不会发生这件事儿了。解决方法：通过上面我们知道需要通过深拷贝的方式将数据传个子组件，这样的事情就不会发生了，我们可以使用lodash的clonedeep。
Vue2父组件异步数据传递给子组件的问题解析
"Vue2父组件通过props向子组件传递异步数据时，可能存在子组件在父组件数据未获取到前就已经初始化的问题。本文通过两个案例深入解析这个问题，并提出解决方案。" 在Vue2中，父组件可以通过props向子组件传递数据，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值