Vue项目中data数据无法被window.addEventListener中获取

be-glorious

已于 2022-10-30 17:46:09 修改

阅读量2.4k

点赞数 3

文章标签： vue 前端 javascript

于 2022-07-17 11:48:06 首次发布

本文链接：https://blog.csdn.net/silver577/article/details/125829876

版权

本文探讨了在Vue组件中如何在window的滚动事件监听器中正确获取主题高度和滚动高度的问题。通过将匿名函数改为普通函数，解决了在匿名函数中无法访问data属性的问题，同时提供了在mounted和methods中获取滚动高度的方法。

摘要由CSDN通过智能技术生成

一、目的：

要在监听滚动函数里（window.addEventListener）获取到主题高度值（themeTopYs），方便主题高度与滚动高度（positionY）进行比较。

二、问题：

在window.addEventListener里无法获取主题高度（themeTopYs）的值；

在其他地方created,mounted,或者其它methods无法获取到滚动高度（positionY）的值；

代码如下：

data(){
  return{
    themeTopYs:[123],//主题的高度
    positionY:null,//滚动的高度
  }
},
mounted(){
  //获取滚动高度
  window.addEventListener("scroll", function(){
    this.positionY = window.pageYOffset;
    console.log(this.positionY);//有值
    console.log(this.themeTopYs);//undefined
  })
},

三、解决方法：

在监听滚动函数（window.addEventListener）中不使用匿名函数，而是调用普通函数（handleScroll），这样的回调函数就可以获取到其他函数的值（比如主题高度的值themeTopYs）。

代码如下：

data(){
  return{
    themeTopYs:[123],//主题的高度
    positionY:null,//滚动的高度
  }
},
mounted(){
  //监听滚动
  window.addEventListener("scroll", this.handleScroll); 
},
methods:{
  //滚动的回调函数
  handleScroll(){
    this.positionY = window.pageYOffset;
    console.log(this.positionY);//有值
    console.log(this.themeTopYs);//有值
  },
}