vue组件之this指向问题

【问题描述】

返回顶部组件里，用到数据操作。通过方法里改动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;}}}

转载于:https://www.cnblogs.com/jianxian/p/10697056.html

vue组件之this指向问题相关推荐

this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
Vue 组件间的通讯
这一节我们一起看看 vue 中组件间的数据是如何传递的. 前面,我们已经初步建立了 vue 组件化的思想,知道如何创建组件.引入组件以及如何在组件里的一些功能.接下来,我们来学习怎么建立组件之间的连接 ...
Vue 组件间通信六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D ...
Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
vue父子组件生命周期执行顺序_关于Vue组件的生命周期及执行顺序
本文主要讲述了:Vue组件渲染时的生命周期及执行顺序 Vue组件数据变更时的生命周期及执行顺序 Vue组件嵌套时的生命周期及执行顺序正文组件渲染时的生命周期在组件渲染时,每个Vue组件都有4个生 ...
Vue组件间常用的通信方式总结
在使用 vue-cli 创建的 vue 项目中进行组件间的通信,以下是三种常用的组件间通信的方式总结. 1.父组件向子组件传递数据----------------------------> 通过 ...
vue组件穿方法_vue组件间通信六种方式（完整版）
[51CTO.com原创稿件] 前言组件是 vue.js强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A ...
GitChat · 前端 | Vue 组件库实践和设计
来自 GitChat 作者:周志祥更多IT技术分享,尽在微信公众号:GitChat技术杂谈前言现在前端的快速发展,已经让组件这个模式变的格外重要.对于市面上的组件库,虽然能满足大部分的项目,但是 ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

vue组件之this指向问题

vue组件之this指向问题相关推荐

最新文章

热门文章