vue项目中this指向

最新推荐文章于 2024-07-05 17:28:33 发布
原创 最新推荐文章于 2024-07-05 17:28:33 发布 · 8.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue项目中使用Axios发送AJAX请求时遇到的this指向问题。通过对比发送请求前后this.phone的变化，发现es5语法下this指向undefined的原因，并介绍了如何利用箭头函数保持this指向Vue实例的方法。

实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。

发送请求前，this.phone还有值，发送请求后this.phone的值就有问题了。

纠其原因是es5 的写法，this的值发生了变化。指向undefined。而这里我们的this 需要指向vue实例

这里需要再继续补充箭头函数的知识。

箭头函数的this指向的是外层代码块中的this。所以this 当然指向的是vue实例，再用this.phone就不会出错啦！

C++知识点累积（五）
qq_19300307的博客
10-12 397
** 2020-10-12 C++知识点累积（五） ** ** 一、 ** partial ** 二、 ** getchar() 函数名：getchar() 头文件：stdio.h 功 能：从I/O流中读字符 原 型：int getchar(void); getch() 函数名：getch() 头文件：conio.h 功 能：从控制台读取一个字符，但不显示在屏幕上 原 型：int getch(void) 返回值：读取的字符 getche() 函数名：getche() 头文件：conio.h 功
vue项目中在外部js文件中直接调用vue实例的方法比如说this
10-17
然而，在一些特定的情况下，比如在外部引入的JavaScript文件中，this可能并不指向Vue实例，而是指向全局对象window，这并不是我们想要的结果。那么，如何在外部JavaScript文件中正确调用Vue实例的方法呢？本文将详细...
改变this指向的三种方法
weixin_63763239的博客
03-10 393
<script> function Parent(money, house) { this.money = money this.house = house } // let obj = {} function Son() { this.type = '孩子' // call的第一个参数是要修改的this指向的对象 后面是给调用call方法的函数传递的参数 参数以散落的形式传递 // Parent.c..
vue小记——this(1)
2301_78796401的博客
02-20 2129
在JavaScript中，this是一个特殊的关键字，它在函数被调用时自动定义。this的值在函数被调用时决定，取决于调用的上下文（context），它代表了函数运行时的当前对象。
this指向问题以及如何改变指向
weixin_53954018的博客
07-05 1522
箭头函数的"this"是静态的，它捕获其定义时（而不是运行时）的上下文。因此，箭头函数通常不适合作为Vue组件中方法的定义方式，因为它无法访问Vue实例的数据和方法。：普通函数的"this"是在运行时动态绑定的，取决于函数的调用方式和上下文。Vue.js在模板和事件处理函数中自动绑定了组件实例，以便确保方法中的"this"指向正确。会指向当前的Vue实例，因为Vue在内部会确保方法被调用时绑定正确的上下文。方法创建一个新的函数，称为绑定函数，它会把指定的对象绑定为调用函数时的。
【Vue】this代表什么含义
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
05-19 3979
vuejs中this代表的含义：1、vue组件或者实例中，this代表调用它的Vue实例；2、回调函数中，this代表父级组件；3、箭头函数中，this代表定义它时所处的对象，即宿主对象。 Vuejs中的this变量 1 vue组件中 在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy以及destroyed）里使用this，this指代调用它的Vue实例，即（new V.
【vue】页面加载时自动获取code并发送请求
qq_46057971的博客
10-24 2006
var url = '地址或者用window.location.href';//页面加载时自动执行。1.自动执行获取url地址以及参数。3.自动跳转到别的页面用路由跳转。在vue页面中，页面加载时。2.发送请求给后端接口。
this指向及强制性修改this指向的三种方法详解
前端泡面人
05-07 841
this指向、修改this指向方法
详解vue中的computed的this指向问题
11-28
console.log(this) // 这里的this指向当前Vue实例 } } ``` 在这里，`this`将指向Vue实例，因为函数的`this`值在调用时确定。 为了解决箭头函数导致的`this`指向问题，有以下几种解决方案： 1. **使用普通函数**...
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue中使用axios库发送HTTP请求时，经常会遇到回调函数中this指向问题，特别是当使用axios.get或axios.post方法时，其then或catch回调函数中的this可能并不指向Vue实例。这就导致在回调函数中无法使用Vue实例的data...
Vue中的this.$options.data()和this.$data用法说明
11-20
在Vue.js中，`this.$options.data()` 和 `this.$data` 都是用来处理组件数据的，但它们的使用场景和行为有所不同。这个问题涉及到Vue实例的生命周期和数据绑定的原理。 首先，`this.$options.data()` 返回的是组件...
vue中的this指向问题
热门推荐
JINGinC的博客
10-23 1万+
最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向 看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。 但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。 在Vue的官方文档是这么解释的： methods 将被混入到 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 指向问题 ）
qq_45623378的博客
10-04 441
指向问题
Vue中this的指向问题
qq_45647792的博客
06-05 1854
在下面的代码中，这里的this指向对象vm，因而可以使用创建的Vue对象中的data内的数据及methods方法。</</</constnewVuedatareturnmsg'This 的指向'methodstestFnlog'msg'thistestFn;</</</
Vue中的this
z1216108894的博客
11-22 1万+
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法。 要用方法名(){}写,就代表this指向是vue实例,如果使用()=>{}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即th
关于vue使用时this指向的问题,以及this指向的各种情况
tianjian_zhou的博客
09-17 6530
工作中经常会用到let _this = this;为什么要这么写呢？于是我决定在空闲时间一查究竟： this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文 在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter & setter等都适用）；构造函数...
js和vue中this指向总结
yusun1234的博客
02-11 1089
js 1、构造函数中，指向构造函数本身 function Pro(){ this.x = '1'; this.y = function(){}; } var p = new Pro(); 2、事件绑定中，行内绑定指向window、动态绑定和监听事件指向本节点对象 3、定时器中，分两种 var obj = { fun:function(){ this ; } } ​ setInterval(obj.fun,1000); // this指向
Vue基础this指向
山外小楼
06-01 1万+
刚刚学习了一个基础教程是讲vue中this指向，下面用实例说明。 点击添加并查看this {{item}} new Vue({ el: "#app", data: { list: ["banner", "orange", "apple"] }, methods: { on: function() {
vue中this的指向
最新发布
10-21
由Vue管理的函数，如computed计算属性、watch监视属性（Vue 3中过滤器已弃用且不再支持）、methods等属性里配置的函数，this指向Vue实例。但不能采用箭头函数写法，因为箭头函数没有自己的this对象，使用this时会向...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值