vue中的this指向问题

最新推荐文章于 2025-03-15 22:11:40 发布
原创 最新推荐文章于 2025-03-15 22:11:40 发布 · 330 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了Vue框架中this的指向问题，特别是在不同组件和方法中的行为差异。在组件中，this通常代表当前组件实例。在methods里，箭头函数的this指向window，而普通函数则指向组件本身。同样，在created等生命周期钩子中，箭头函数的this也指向组件实例，而普通函数的指向则相反。

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

.parent查看子组件中的父类,获取结果为单独对象.parent 查看子组件中的父类, 获取结果为单独对象 .parent查看子组件中的父类,获取结果为单独对象.children 查看组件(vue对象的)子类组件, 获取结果为数组

在不同组件中,this代表当前组件,

方法中:
methods:
箭头函数指向为window
普通函数指向为 组件本身

created:(任意勾子函数)
箭头函数指向为 组件本身
普通函数指向为 window

浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue中使用axios库发送HTTP请求时，经常会遇到回调函数中this指向问题，特别是当使用axios.get或axios.post方法时，其then或catch回调函数中的this可能并不指向Vue实例。这就导致在回调函数中无法使用Vue实例的data...
vue绑定事件后获取绑定事件中的this方法
10-18
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的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中的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指向问题
Canace_Xyxjjcaw的博客
02-10 1079
vue中created、mounted中的this指向vue实例，但是回调中的指向不是vue实例。解决办法： 定义一个变量为_this，将指向vue的this赋值给_this。
Vue里this指向
cc蒲公英的博客
06-30 3万+
一、普通函数中的this 这是vue文档里的原话：All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.意思是：在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vu...
vue的this指向详解
m0_52669454的博客
08-02 3306
vue的this指向详解
vue中this指向问题？
03-11
这是一个常见的问题，vue中的this指向取决于上下文环境。在vue组件中，this指向当前组件实例，而在普通函数中，this指向全局对象。如果需要在函数中使用组件实例的属性或方法，可以使用箭头函数或bind方法来绑定this...
vue.js中created方法作用
热门推荐
初漾的博客
05-22 11万+
这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。 一般可以在created函数中调用ajax获取页面初始化所需的数据。 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程
Vue.js 项目出现这个错误，别慌！
IT修真院：初学者转行到互联网的聚集地
02-18 964
作者简介： 李中凯老师，8年前端开发，前端负责人，擅长JavaScript/Vue。 公众号：1024译站 掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts 主要分享：Vue.js， JavaScript，CSS Vue.js 自从诞生以来，凭借它简洁优雅的 API、不错的性能和较低的学习门槛，赢得了广大前端开发...
vue中this到底指向谁
Var521的博客
03-19 2136
今天，在练习代码的时候遇到了关于this指向谁的问题，因一直都未曾深究，始终处于懵懂状态，这次决定把他弄明白，故有此笔记。 问了前辈，前辈告诉我：“现在前端有两种this： 1. 普通的this始终指向调用者 2. 而箭头函数的this由上下文决定 ”。 此例子是非父子组件相互传值： <body> <div id="app"> <div>父组件&lt...
Vue中组件this指向问题
q879936814的博客
06-26 2790
提到vue的组件化开发，那么肯定会存在着data(){}用来存放数据，而一般使用的时候不能直接使用，而是需要用this来指向。 var app = new Vue({ el:"#app", data:{ }, components:{ aa:{ template:'#aaa', data(){
vue 中this 指向问题的理解
m0_50302965的博客
07-11 315
vue 管理的函数 不要用箭头函数，不然this指向window不是vue管理的函数 如定时器 用箭头函数才能让this指向vue、因为箭头函数会让this 指向空，如果是vue里的函数 就不会指向vue 会向外层直接指向window 如果是定时器 会让this 不指向js管理器 而且外层指向vue...
vue父组件调用子组件方法this 指向问题_前端面试准备笔记系列之vue(03)
weixin_34795681的博客
01-26 1477
目录01. vue组件间的参数传递02. vue子组件调用父组件方法，父组件调用子组件方法03. 兄弟组件之间如何通讯？自定义事件正文01. vue组件间的参数传递父子组件传值父-》子 通过props子组件接收什么参数是有规则的，既可以是数组也可以是对象。子-》父 $emit向外触发一个事件注意：父组件可以随意向子组件传递参数，但是子组件不能反向修改父组件数据。单项数据流的概念。props特性：p...
vue this 指向谁？
雨声学java
03-27 1408
箭头函数的this指向的是VueComponent实例对象 普通函数的this指向的调用者Vue实例对象 组件中方法中的this是当前组件，可以改变当前组件中的data()方法中的数据，进而改变dom 中的数据 ...
vue父组件调用子组件方法this 指向问题_Vue实战030:子组件与父组件之间方法调用...
weixin_39899226的博客
02-04 874
前面我分享了vue实战027:子组件和父组件之间传值，今天继续分享子组件与父组件之间方法调用，在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现，他们就是$root、$parent、$refs、$children属性，其中$root、$parent是子组件向父组件调用方法，而$refs、$children则是父组件向子组件调用方法。$root与$parent的...
Vue 中 this 使用指南与注意事项
最新发布
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-15 2289
Vue 中 this 使用指南与注意事项
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值