vue组件中的this指向问题

【问题描述】返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效  检查后发现this指向window,而非vue实例,所以无法操作数据。

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

【解决方案】:因为在函数内部使用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;
        }
    }
}

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值