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; } } }

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11285.html