VUE全局this指向

前言

在很久很久之前我还是个菜鸡的时候，解决报错的时候，不幸看过一种关于this指向的写法，当时没记住，只知道有个这么个模糊的概念，然后今天晚上来了灵感，就写出来了，说到这个this指向问题，很多刚入行的前端同学应该多会碰到，那么今天就写一下关于全局this指向的代码，让我们的代码更加简洁。

传统写法

问题代码

<template><div><div @click="test">按钮</div></div>
</template>
<script>export default {name: "test",data(){return{testArr:[1,2,3,4,5],testData:"data"}},methods:{test(){this.testArr.forEach(function(value) {console.log("===>",this.testData);});}}}
</script>

报错

既然说找不到testData，我们明明在data里挂载了testData数据，但是这里获取不到，这是因为这里经过forEach循环后this的指向变了，那么通常的解决方案就是声明一个let _this=this;的写法
解决

<script>test(){let _this=this;this.testArr.forEach(function(value) {console.log("===>",_this.testData);});}
</script>

当然咯这种并没有问题，但是我们如果有很多方法都存在this指向问题的时候，那么我们的代码就会下面这样

<script>test1(){let _this=this;this.testArr.forEach(function(value) {console.log("===>",_this.testData);});},test2(){let _this=this;this.testArr.forEach(function(value) {console.log("===>",_this.testData);});},test3(){let _this=this;this.testArr.forEach(function(value) {console.log("===>",_this.testData);});},test4(){let _this=this;this.testArr.forEach(function(value) {console.log("===>",_this.testData);});}</script>

假设test1、test2、test3、test4，都是业务代码，那么这里每次方法中都要声明let _this=this;就很烦！！！

VUE全局this指向

<template><div><div @click="test">按钮</div></div>
</template>
<script>let _this=null;export default {name: "test",data(){return{testArr:[1,2,3,4,5],testData:"data"}},created(){_this=this},methods:{test(){this.testArr.forEach(function(value) {console.log("===>",_this.testData);});}}}
</script>

即使我们有再多存在this指向问题的代码也不需要每个方法中写let _this=this;代码了，直接通过外部创建的_this搞定

VUE全局this指向相关推荐

VUE全局导航守卫、请求、响应拦截器的设置
文件设置参考地址:https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7 ...
vue 全局函数的定义与任意调用（代码篇）
文章目录 vue 全局函数的定义与任意调用方法一: 首先: 之后: 最后: 打印结果 · 截图: 方法二:[推荐] 代码:注意事项: vue 全局函数的定义与任意调用方法一: 首先: 随意新建 ...
VUE 全局监听sessionStorage变化
VUE 全局监听sessionStorage变化另参考: (转)vue中监听sessionStorage的变化
Vue:全局拦截所有请求，并在请求头中添加token
Vue:全局拦截所有请求,并在请求头中添加token 在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过博客,讲述后端对token的 ...
vue全局修改设置滚动条样式
::-webkit-scrollbar{ /*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; } ::-webkit-scrollbar-th ...
vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
Vue全局注册公共组价
Vue全局注册公共组价
Vue全局路由侦听beforeEach路由守卫附代码使用示例
使用路由守卫beforeEach,可以实现路由侦听: 全局侦听路由跳转的实现代码: app.vue onLaunch: function(e) {this.$router.beforeEach((to ...
vue 全局排序_搞定VUE [ 一 ]
击上方蓝字关注我首先.以我个人的观点,不赞成把这些东西死记下来,会使用,能上手做,有不明白的及时的去浏览.翻阅,在实战中去快速的理解和掌握,之后水到渠成式的一步步去走向深入.当然,从自身的职 ...
vue 公用页面引用_关于vue全局引用公共的js和公共的组件的折腾
前沿最近在项目开发中遇到一些需要全局引用的公共js,或者公共组件,早就烦死了那种每个页面都写一遍,都引用一个js的写法,正好vue解决了这个额问题,于是乎就开始折腾,折腾的过程中也发现了一些自己之前 ...

VUE全局this指向

前言

传统写法

VUE全局this指向

VUE全局this指向相关推荐

最新文章

热门文章