vue组件之this指向问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

【问题描述】

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

mounted() {
window.onscroll=function(){
if(document.documentElement.scrollTop>) {
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>) {
vm.isActive=true;
}else{
vm.isActive=false;
}
}
}