zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue组件之this指向问题

Vue组件 this 指向 问题
2023-09-11 14:19:07 时间

【问题描述】

返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效

        mounted() {
            window.onscroll=function(){
                if(document.documentElement.scrollTop>100) {
                    this.isActive=true;
                }else{
                    this.isActive=false;
                }
            }
        }

    此时发现无效???

    检查后发现this指向window,而非vue实例,所以无法操作数据。

 

【解决方案】

/*  问题:在内部直接操作this失效? */
/* 解析:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,
首先需要在最外部,设置一个变量,将其绑定上vue实例。*/
        mounted() {
            /*  问题:在内部直接操作this失效? */
            /*  解析:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,
                首先需要在最外部,设置一个变量,将其绑定上vue实例。*/
            var vm=this;
            window.onscroll=function(){
                if(document.documentElement.scrollTop>100) {
                    vm.isActive=true;
                }else{
                    vm.isActive=false;
                }
            }
        }

 

 

 

 

.