解决Vue中mounted钩子函数获取节点高度出错问题

这篇文章主要为大家详细介绍了解决Vue中mounted钩子函数获取节点高度出错问题，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

遇到的问题

 

最近在开发一个Vue的项目，好几个页面都有用到一个 页面楼层滑动的组件，我就直接封装成了一个，但是遇到一个bug，就是我需要得到这个组件的offsetTop，然后页面滚动到这个位置的时候，就设置position属性为fixed，让他固定在屏幕上。问题是当我在mounted钩子函数中获取offsetTop的时候，在新开的页签中打开页面，会得到错误的offsetTop，但是在当前页面刷新，就不会有问题。

 

定位问题

 

 

后来查到问题，就是加载的问题，新窗口打开图片，默认是没有带缓存的，图片是GET请求，是异步的，js运行的肯定比图片GET要快，所以当执行mounted钩子函数的时候，图片还没有全部加载完，这时候就会得到一个错误的offsetTop。

 

解决方案

 

 

给图片加上ref属性，并在那个组件里的mounted钩子函数中写，

代码如下：

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}

这里的Bus是用的EventBus，两个组件中事件响应的办法，不懂或者感兴趣的可以点这里EventBus。
需要得到offsetTop的组件里面

代码如下：

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})

这时候就可以确认每次不管是页面新打开还是当前页刷新都可以得到正确的offsetTop。

本文来自：http://www.q1010.com/184/5526-0.html

注：关于解决Vue中mounted钩子函数获取节点高度出错问题的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js