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; } } }
.
相关文章
- [转] vue父组件触发子组件事件
- [转] vue从入门到进阶:组件Component详解(六)
- Vue 父子组件之间的通信
- 【Vue】【子组件】调用【父组件】参数,props属性值【动态】调用的两种方法(图文+完整代码)
- Vue - 实现任意内容展开 / 收起功能组件(支持自定义高度、动态展开与折叠、自定义展开与收起文案、动态增删数据自动计算高度、过渡动画等)
- Vue - 完美解决 Element UI 侧边导航菜单 <el-menu> 出现滚动条,去掉 Element 侧边导航组件的横纵滚动条(但滚动功能依然保留,仅仅是去掉 “滚动条“)100% 解决方案
- JavaScript - vue.js / nuxt.js / uni-app / 微信小程序 js 时间戳与日期格式互转(时间戳转日期字符串格式,日期回转时间戳格式)支持转为日期字符串后自动补0
- springboot + vue 项目之前端开发工具(一)
- 【前端】vue组件之间数据传递/父子组件/父传子/子传父/兄弟组件
- 【可视化】Vue基础
- vue页面转发
- Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)
- 手动webpack创建vue项目
- vue--自定义标签属性--用于多个事件共同引用一个组件--但是两个事件要实现的功能不同-避免冲突
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- 【vue笔记记录】
- Vue基础知识之目录
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- 浅析Vue CompositionAPI和React Hooks对比:hook的意义、两者差别(原理-链表/Proxy、代码执行-每次渲染都执行/组件创建时运行、声明响应式状态、如何跟踪依赖、生命周期、自定义hook、Ref获取元素、计算属性附加函数、Context和provide/inject、在渲染上下文中暴露值)
- vue中引入第三方字体图标库iconfont及iconfont引入彩色图标
- Vue表单和组件
- Vue子组件向父组件传值(this.$emit()方法)
- Vue设置导航栏为公共模块并在登录页不显示
- vue 父子组件传递数据