精华内容
下载资源
问答
  • VUE全局this指向

    2021-12-03 00:16:13
    在很久很久之前我还是个菜鸡的时候,解决报错的时候,不幸看过一种关于this指向的写法,当时没记住,只知道有个这么个模糊的概念,然后今天晚上来了灵感,就写出来了,说到这个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指向

    2021-12-08 17:27:19
    .事件中的this与数据操作 1. 方法中的this代表vm对象 a.方法和ES5的函数中的this是vm对象 b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的...fn4中的this指的是vm也是new vue这个对象 ...

    .事件中的this与数据操作

    1. 方法中的this代表vm对象
    a.方法和ES5的函数中的this是vm对象
    b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法


    2. 操作数据: this.xx="新值" 
    //这里的修改会执行两步操作: 
    //a.修改内存data容器中的数据
    //b.刷新UI==>重新设置innerHTML

     

     

     fn4中的this指的是vm也是new vue这个对象

    展开全文
  • vue中的this指向问题

    千次阅读 2021-10-23 21:16:32
    最近写项目遇到很多this指向的...但是在Vue实例中,methods中如果用的是正常函数,那么它的this指向Vue实例;如果是箭头函数,this指向window对象。 在Vue的官方文档是这么解释的: methods 将被混入到 Vue ...

            最近写项目遇到很多this指向的问题,今天来写一下我总结的this指向

            看了很多文章,之前也在私下总结过,对于正常函数,谁调用的它,this就指向谁,而箭头函数没有this,它的this指向一般就是上下文中,与谁调用它没关系。

            但是在Vue实例中,methods中如果用的是正常函数,那么它的this就指向Vue实例;如果是箭头函数,this就指向window对象。

            在Vue的官方文档是这么解释的:

    methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

    注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

    1. Vue中生命周期钩子和自定义方法中的this指向当前的 Vue 实例:

            生命周期钩子的 this 上下文指向调用它的 Vue 实例

    所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。

    2. Vue 中回调函数中的 this:

    1. 若回调函数为匿名函数,非严格模式下指向 window,严格模式下为 undefined。
    2. 若回调函数为自定义方法,则 this 指向 Vue 实例。
    3. 若回调函数为 箭头函数,则 this 指向 Vue 实例。

    3. Vue 中 addEventListener 中的 this

            通常,事件监听函数中的 this 都指向绑定事件的那个元素, 但是在 Vue 中,监听函数中的 this 也指向 Vue 实例

    总结:除了回调函数中的 this ,其它地方的 this 均指向 Vue 实例

    展开全文
  • vuethis指向小记

    2020-12-24 14:06:49
    普通函数中的的this指向取决于运行该函数的作用域,而箭头函数的this是定义时就固定了。然而在vue中有一事不明:惊喜点击惊喜点击1varapp=newVue({el:"#app",data:{},methods:{onSurprise:()=>{...

    普通函数中的的this指向取决于运行该函数的作用域,而箭头函数的this是定义时就固定了。

    然而在vue中有一事不明:

    惊喜点击
    惊喜点击1

    var app=new Vue({                el:"#app",                data:{

    },                methods:{                    onSurprise:()=>{                        console.log('箭头函数的'+this)

    },                    onSurprise1:function(){                        console.log(this)

    }

    }

    })        

    分别点击控制台输出

    箭头函数绑定的是window,而运行时的函数的作用域是vue

    仔细想想好像也对,函数运行时是通过'app.函数名'调用的,所以onSurprise1的this指向app,而app是vue的实例。对于箭头函数,onSurprise是在全局window下定义的,所以this指向window。

    作者:fenerchen

    链接:https://www.jianshu.com/p/3eabf16aee10

    展开全文
  • vue3 使用this指向

    千次阅读 2021-05-31 13:14:01
    按需导入 import {getCurrentInstance} from "vue"; 定义 const { proxy } = getCurrentInstance(); 使用 proxy.$emit("update:StepComponent",2)
  • 自定义方法(普通函数)内部的this指向vue实例(vm)。 不建议用箭头函数,因为箭头函数this本身没有指向,会去外边找,找到的this是window对象,而不是vue实例。
  • vue this指向
  • import * as userLogin from '@/page/login/userlogin.vue' demoFun(){ userLogin.default.methods.refreshCode() // 调用组件组件中的方法 } userlogin.vue 设置变量_this = {},注意不能在export default中...
  • singlecheck[i].addEventListener("click", ()=>{ console.log(this.indexs) if(singlecheck[i].checked){ this.indexs.push(this.tableData...一定要用箭头函数 如果用function(){}中的this指向触发事件的 元素
  • vue”: “^2.6.11”, “typescript”: “~3.8.3”, 问题重现 html <el-tree :data="treeOptions.data" node-key="id" @check="treeOptions.checkChange" /> js 问题1: export default class ...
  • 类似这样,此时this指向并不是我想要的,因为我没法this.XXX拿到对应的数据,使用在这个lazyLoad方法中。 直接记录一下解决方法,很简单把lazyLoad方法改成箭头函数。this指向就对了。
  • 前言众所周知axios是vue-resource后出现的vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的...1.解决办法在vue中使用axios做网络请求的时候,会遇到this指向vue,而为unde...
  • {}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch和各种回调钩子,因为他们是vvue本身的方法所以...
  • 1. methods 对象的 this指向 2. methods 对象的里的 方法 为什么不能用箭头函数 代码 // 当 methods 有方法时 if (methods) { // 对methods对象中的每一个方法遍历 for (const key in methods) { // 取出每一个...
  • 当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法,goToUrl(name,query){if(query){if(query.addressCode){vueObject.$router.push({name:name,query:query});}else{query.addressCode = this....
  • 在data里定义Object类型的变量时,会发现Object中访问不到vuethis属性。 例如: export default { data(){ return { a: "123", b: { c: this.a } }; }, created() { console.log("b: ", this.b.c); /...
  • vue 在methods时的this指向问题

    千次阅读 2020-12-25 17:30:49
    vue的methods的this指向问题 使用了element ui 的框架 methods : { checkNum(){ var numb = [1,2,3,4,5,6]; numb.forEach((item) => { this.$message({ message : '$message未定义', type:'error' }) ...
  • 1. Vuethis指向问题 如果是通过this访问data或者methods中的数据及方法,this指向Vue的实例 2. Vue 中为何this.***可以直接访问data中的数据状态 如第一问所说,这样this指向都是指向Vue实例,那this.*** 是如何...
  • export default { data() { return { hello:"你好" } }, methods:{ ... this.$options.methods.open(this) } } } close函数调用open函数,close函数里调用的open函数的参数this赋值给that,这样可
  • Vue props传入function时的this指向问题

    千次阅读 2021-01-04 16:01:58
    Vue props传入function时的this指向问题 Parent.vue <template> <div> <Child :func="parentFunc"></Child> </div> </template> <script> import Child from './...
  • methods:{backRenderer(instance, td, row, col, prop, value, cellProperties, t) {// 如何让此处的this指向函数的掉者,也就是下文中的cells,而不是指向vueconsole.log(this);Handsontable.renderers....
  • 普通函数中this指向其调用者,箭头函数中this指向函数创建时最近的上下文。 call,bind, apply主要用于改变对象中的this指向。 call,bind, apply异同: 同:改变对象中this指向 异: call 1、传入(object, str1, ...
  • checkNodes.forEach(function(item,index){ constsubData={}; debugger; subData.superDeptId=item.deptId; ...subData.superDeptName=item.deptName;...console.log(this....subData.subjectName=this.bmfcDialo...
  • // 比如在uni.getLocation方法中使用this修改data中的数据,this指向会出错 uni.getLocation({ type: 'wgs84', success: function (res) { console.log('当前位置的经度:' + res.longitude); console.log('当前...
  • Vue中使用mounted和created时,this无法指向data中的数据问题描述问题分析解决办法 问题描述 预想在Vue创建页面时接收后端数据,然后渲染到页面。 使用data进行数据绑定,可是数据修改不成功。 //想要修改data中的...
  • 两个this 是不一样的,out this 指向的是Vue 实例; inner this 指向的是window; 三、结果分析 其实两个this指向不一样是因为调用它们所在函数的对象不一样,out this所在的函数SendGet 是被Vue 实施调用, inner...
  • 今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题。1.解决方法:使用 =>原代码:axios.get('/user', {params: {ID: 12345}}).then(function (response) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,655
精华内容 12,662
关键字:

thisvue指向

vue 订阅