这次给大家带来怎样实现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 })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Node.js Buffer使用详解
应该如何搭建webpack+react开发环境
以上就是怎样实现Vue中mounted钩子函数获取节点高度的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2755185.html
