vue中的this指向问题

最新推荐文章于 2023-04-06 16:08:19 发布
最新推荐文章于 2023-04-06 16:08:19 发布
阅读量253 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45656036/article/details/117043919
版权
本文探讨了Vue框架中this的指向问题，特别是在不同组件和方法中的行为差异。在组件中，this通常代表当前组件实例。在methods里，箭头函数的this指向window，而普通函数则指向组件本身。同样，在created等生命周期钩子中，箭头函数的this也指向组件实例，而普通函数的指向则相反。
摘要由CSDN通过智能技术生成

1.vue中各种this指向(重要)

. p a r e n t 查 看 子 组 件 中 的 父 类 , 获 取 结 果 为 单 独 对 象 . parent 查看子组件中的父类, 获取结果为单独对象 .

最低0.47元/天 解锁文章
神的少女光芒万丈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中this指向问题
webDevelopSnail的博客
10-31 1443
一、methods中this 1.通常methods属性中的回调函数的this都会指向vue实例 //第一种写法： var vm = new Vue({ el:'app', data:{ name:'', list:[], }, methods:{ handle :function(){ // this.list.push
Vue.js 项目出现这个错误，别慌！
IT修真院：初学者转行到互联网的聚集地
02-18 781
作者简介： 李中凯老师，8年前端开发，前端负责人，擅长JavaScript/Vue。 公众号：1024译站 掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts 主要分享：Vue.js， JavaScript，CSS Vue.js 自从诞生以来，凭借它简洁优雅的 API、不错的性能和较低的学习门槛，赢得了广大前端开发...
详解vue中的computed的this指向问题
11-28
今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域，由上下文确定 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象 2.vue中的computed 使用箭头函数 list: () => { console.log(this) } 不使用箭头函数 allFigure: function() { console.log(this) }, 使用get() allFigure: { get() { console.log(this);
vue中this的指向
atu1111的博客
07-25 1万+
vue中this的指向 1.在Vue所有的生命周期钩子方法   比如在mounted里使用this，this指向调用它的Vue实例，如下列子： 2.vue组件生命周期钩子方法里面还有方法使用this   在函数内部使用this时，this会指向window，而非vue实例。所以除了vue组件自身方法外，在别的地方调用this时， 首先需要在最外部，设置一个变量，将其绑定上vue实例。 3.vue普通方法中使用this   this指向调用它的Vue实例 4.vue箭头方法中使用this   箭头函数没
vue的this指向详解
m0_52669454的博客
08-02 3168
vue的this指向详解
vue.js中created方法作用
热门推荐
初漾的博客
05-22 11万+
这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。 一般可以在created函数中调用ajax获取页面初始化所需的数据。 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程
Vue中组件this指向问题
q879936814的博客
06-26 2737
提到vue的组件化开发，那么肯定会存在着data(){}用来存放数据，而一般使用的时候不能直接使用，而是需要用this来指向。 var app = new Vue({ el:"#app", data:{ }, components:{ aa:{ template:'#aaa', data(){
vue中this指向问题
最新发布
05-21
在 Vue 中，this 指向的是当前组件实例，但是在不同的上下文中，this 可能会指向不同的对象。下面列举了一些常见的 this 指向问题： 1. 在回调函数中，this 指向的可能是调用该函数的对象，而不是当前组件实例。...
vue中this指向问题？
03-11
这是一个常见的问题，vue中的this指向取决于上下文环境。在vue组件中，this指向当前组件实例，而在普通函数中，this指向全局对象。如果需要在函数中使用组件实例的属性或方法，可以使用箭头函数或bind方法来绑定this...
vue 中this 指向问题的理解
m0_50302965的博客
07-11 267
vue 管理的函数 不要用箭头函数，不然this指向window不是vue管理的函数 如定时器 用箭头函数才能让this指向vue、因为箭头函数会让this 指向空，如果是vue里的函数 就不会指向vue 会向外层直接指向window 如果是定时器 会让this 不指向js管理器 而且外层指向vue...
vue绑定事件后获取绑定事件中的this方法
10-18
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父组件调用子组件方法this 指向问题_前端面试准备笔记系列之vue(03)
weixin_34795681的博客
01-26 1401
目录01. vue组件间的参数传递02. vue子组件调用父组件方法，父组件调用子组件方法03. 兄弟组件之间如何通讯？自定义事件正文01. vue组件间的参数传递父子组件传值父-》子 通过props子组件接收什么参数是有规则的，既可以是数组也可以是对象。子-》父 $emit向外触发一个事件注意：父组件可以随意向子组件传递参数，但是子组件不能反向修改父组件数据。单项数据流的概念。props特性：p...
vue this 指向谁？
雨声学java
03-27 1347
箭头函数的this指向的是VueComponent实例对象 普通函数的this指向的调用者Vue实例对象 组件中方法中的this是当前组件，可以改变当前组件中的data()方法中的数据，进而改变dom 中的数据 ...
vue父组件调用子组件方法this 指向问题_Vue实战030:子组件与父组件之间方法调用...
weixin_39899226的博客
02-04 801
前面我分享了vue实战027:子组件和父组件之间传值，今天继续分享子组件与父组件之间方法调用，在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现，他们就是$root、$parent、$refs、$children属性，其中$root、$parent是子组件向父组件调用方法，而$refs、$children则是父组件向子组件调用方法。$root与$parent的...
【Vue】在created钩子函数中: this.$refs为空对象
chen__cheng的博客
04-06 2749
原因: 在created()被调用的时候，此时Vue才完成了数据监测、数据代理等过程，能够访问data、methods数据，但是还未进行模板解析。而ref是在DOM树渲染完成之后生成的，所以this.$refs= {}。 解决： 在mounted()钩子函数中获取，mounted()此阶段DOM树已经渲染完成。 在created()钩子函数中，加入：this.$nextTick()方法，由于此方法是会在DOM 更新循环结束之后执行延迟回调，所以可以在此方法中获取子组件实例。 ...
Vue中beforeRouteEnter、beforeCreate、Created的执行时机&this在这三者中的值
IT_bar的博客
04-06 978
关于Vue中beforeRouteEnter、beforeCreate、Created的执行时机&this在这三者中的值
vue中获取异步数据
mmiaoChong的博客
12-25 1845
vue中获取异步数据问题描述：问题分析解决办法： 问题描述： 1.在created生命周期内进行异步数据的请求，且将获取到的数据赋值给this.data。 2.此时如果在mounted生命周期里获取this.data是获取不到的 问题分析 因为异步加载需要时间，如果延迟时间是可以获取到数据的，但是问题是不知道需要延迟多久，况且这个方法也不是很好。 那么有没有一个比较优雅的办法进行获取这个异步加载的数据呢 解决办法： 第一种：使用setTimeout() 第二种：在data中设置字段 watch:{ 字段(
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值