vue项目中this指向

最新推荐文章于 2024-07-05 17:28:33 发布
最新推荐文章于 2024-07-05 17:28:33 发布
阅读量8.1k 收藏 2
点赞数
分类专栏： Vue.js ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cofecode/article/details/76566115
版权
Vue.js 同时被 2 个专栏收录
29 篇文章 2 订阅
订阅专栏
ES6
4 篇文章 0 订阅
订阅专栏

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

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

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

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

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

cofecode
关注
专栏目录
Vue中this指向问题
webDevelopSnail的博客
10-31 1477
一、methods中this 1.通常methods属性中的回调函数的this都会指向vue实例 //第一种写法： var vm = new Vue({ el:'app', data:{ name:'', list:[], }, methods:{ handle :function(){ // this.list.push
vue中的this指向问题
qq_45656036的博客
05-19 278
1.vue中各种this指向(重要) .parent查看子组件中的父类,获取结果为单独对象.parent 查看子组件中的父类, 获取结果为单独对象 .parent查看子组件中的父类,获取结果为单独对象.children 查看组件(vue对象的)子类组件, 获取结果为数组 在不同组件中,this代表当前组件, 方法中: methods: 箭头函数指向为window 普通函数指向为 组件本身 created:(任意勾子函数) 箭头函数指向为 组件本身 普通函数指向为 window ...
vue小记——this(1)
2301_78796401的博客
02-20 1728
在JavaScript中，this是一个特殊的关键字，它在函数被调用时自动定义。this的值在函数被调用时决定，取决于调用的上下文（context），它代表了函数运行时的当前对象。
this指向问题以及如何改变指向
最新发布
weixin_53954018的博客
07-05 991
箭头函数的"this"是静态的，它捕获其定义时（而不是运行时）的上下文。因此，箭头函数通常不适合作为Vue组件中方法的定义方式，因为它无法访问Vue实例的数据和方法。：普通函数的"this"是在运行时动态绑定的，取决于函数的调用方式和上下文。Vue.js在模板和事件处理函数中自动绑定了组件实例，以便确保方法中的"this"指向正确。会指向当前的Vue实例，因为Vue在内部会确保方法被调用时绑定正确的上下文。方法创建一个新的函数，称为绑定函数，它会把指定的对象绑定为调用函数时的。
【Vue】this代表什么含义
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
05-19 3546
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 1891
var url = '地址或者用window.location.href';//页面加载时自动执行。1.自动执行获取url地址以及参数。3.自动跳转到别的页面用路由跳转。在vue页面中，页面加载时。2.发送请求给后端接口。
改变this指向的三种方法
weixin_63763239的博客
03-10 357
<script> function Parent(money, house) { this.money = money this.house = house } // let obj = {} function Son() { this.type = '孩子' // call的第一个参数是要修改的this指向的对象 后面是给调用call方法的函数传递的参数 参数以散落的形式传递 // Parent.c..
vue项目中在外部js文件中直接调用vue实例的方法比如说this
10-17
然而，在一些特定的情况下，比如在外部引入的JavaScript文件中，this可能并不指向Vue实例，而是指向全局对象window，这并不是我们想要的结果。那么，如何在外部JavaScript文件中正确调用Vue实例的方法呢？本文将详细...
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue中使用axios库发送HTTP请求时，经常会遇到回调函数中this指向问题，特别是当使用axios.get或axios.post方法时，其then或catch回调函数中的this可能并不指向Vue实例。这就导致在回调函数中无法使用Vue实例的data...
详解vue中的computed的this指向问题
11-28
console.log(this) // 这里的this指向当前Vue实例 } } ``` 在这里，`this`将指向Vue实例，因为函数的`this`值在调用时确定。 为了解决箭头函数导致的`this`指向问题，有以下几种解决方案： 1. **使用普通函数**...
this指向及强制性修改this指向的三种方法详解
前端泡面人
05-07 729
this指向、修改this指向方法
Vue 的 data 函数里的 this 用法
落叶无声的专栏
10-26 1万+
代码示例 const app = new Vue({ el: '#app', props: { id: { type: String, default: '10000' } }, data(vm) { console.log('data', this) // ==> #1. 当前 Vue 实例 console.log('data', vm) // ==> #2. 当前 Vue 实例 return { ne
vue data中的this指向问题
s4944315的博客
09-15 3366
在data里定义Object类型的变量时，会发现Object中访问不到vue的this属性。 例如： export default { data(){ return { a: "123", b: { c: this.a } }; }, created() { console.log("b: ", this.b.c); // undefined } } 这种情况可以用到Object的get属性进行属性定义。
【Vue】不能在data里用this从data拿值
lklalmq的博客
02-20 803
Vue中this的指向问题
qq_45647792的博客
06-05 1559
在下面的代码中，这里的this指向对象vm，因而可以使用创建的Vue对象中的data内的数据及methods方法。</</</constnewVuedatareturnmsg'This 的指向'methodstestFnlog'msg'thistestFn;</</</
VUE data内 THIS 各种情况
weixin_30879833的博客
02-21 475
var vm = new Vue({ /* 在方法中，this 表示该方法所属的对象。 如果单独使用，this 表示全局对象。 在函数中，this 表示全局对象。 在函数中，在严格模式下，this 是未定义的(undefined)。 在事件中，this 表示接收事件的元素。 类似 cal...
Vue中data的this指向问题
热门推荐
qq_124917348的博客
08-11 1万+
最近在做自己的项目时遇到一个问题： export default { data(){ return{ id:this.$route.params.id, musicMessage:[], musiclist:{ title:null, ...
vue中函数this指向问题
06-03
在 Vue 中，函数中的 this 关键字默认指向当前组件实例。但是，当函数被作为回调函数传递时，this 的指向可能会发生变化。为了解决这个问题，可以使用箭头函数或者在函数内部使用 bind 方法来绑定 this 的值。例如：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值