Vue中this指向

最近一直在做毕业设计，学习了Vue用来写了很多的前端代码，不得不说js对我这个“Java前端程序员”有些太不友好，时不时都能遇到一些坑，this就是其中之一。

1 问题代码

为了凸显问题，简化了代码，outerFunction调用了innerFunction，outerFunction中的消息提示框能够显示出来，而innerFunction中就提示：this.$message is not a function。这是什么问题呢？

export default {data() { // ...},methods: {outerFunction() {this.$message({type: 'success',message: 'outer!'});this.$options.methods.updateHandler();},innerFunction() {this.$message({type: 'success',message: 'inner!'});}}
}

在简化之后可能很容易就发现了问题应该出在this上，而当时由于代码太多了，我误以为是其他代码或则Element UI提供的message组件出了问题，在其他地方绕了些时间。所以这也是在提醒我们排查bug时先注释掉无关代码！！！

js里的this和我想当然的this天差地别，误以为this始终是指向全局的。其实this的指向是动态的，是根据上下文来确定的（参考文章：彻底理解js中this的指向)。

2 正确的写法

经过分析可知，outerFunction()中的this是指向全局的没有问题，而innerFunction中的this并不是指向全局的，其实是指向methods（下面我们就能看到），所以自然不能够访问到$message()方法。我们改写innerFunction()让它能够指向全局：

export default {data() { // ...},methods: {testFunction() {console.log('test');}outerFunction() {this.$message({type: 'success',message: 'outer!'});this.$options.methods.updateHandler(this);},innerFunction(_this) {// 注意_this_this.$message({type: 'success',message: 'inner!'});// 输出testthis.testFunction();}}
}

通过将outerFunction()中的this指针传递给innerFunction()就可以了，非常简单和实用！

3 总结

写js还是不能够用写java的思维模式去写，就像这次一样，觉得自己this的用法完全没有问题，但实则错得彻彻底底，容易掉到坑里去。不过这也是不去先了解语言细节，直接开搞的恶果，导致走很多的弯路，有点难受。

Vue中this的指向问题相关推荐

JavaScript中的 this指向问题
以下文章均已附上原文链接 ,侵删文章一:vue中的this指向问题 vue中的this指向问题_JingG459的博客-CSDN博客_vue中this指向问题最近写项目遇到很多this指向的问题, ...
关于在vue中结合数组方法的this的指向问题
最近在项目中遇到一个这样的小问题,在用数组方法结合vue的时候,this的指向不是当前的vue实例,直接看代码 allSelect: function() { var _this = this; ...
Vue中的methods配置项中的箭头函数this指向及相关源码分析
之前在使用Vue时遇到一个问题,我们知道在Vue的methods中定义函数时,要想使用到Vue实例或者组件实例的this时,我们就不能使用箭头函数定义方法,因为箭头函数中的this是在函数定义时生成的 ...
理解Vue中的methods对象方法里的this指向，并解读源码
Vue3的版本 "version": "3.2.20" 阅读区域 618 - 645 解决疑惑 1. methods 对象的 this指向 2. methods ...
iView UI库解决基于vue.js解决table中this的指向问题
this指向全局变量data的数据 html <i-table ref="tables" editable searchable search-place="top ...
vue中过滤器filters的this指向问题。
今天在完成一个时间戳转化时想试试vue的过滤器filters,代码如下: execute_time(time) {if (time === 0) return '/'else return this. ...
vue点击事件中的this指向问题
singlecheck[i].addEventListener("click", ()=>{console.log(this.indexs)if(singlecheck[i] ...
VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化
问题场景: const addOptions = {singleOrComplex,totalNum: this.smallTotalPrice,selectList: this.purchaseLo ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...

Vue中this的指向问题

Vue中this指向

1 问题代码

2 正确的写法

3 总结

Vue中this的指向问题相关推荐

最新文章

热门文章