vue中this.$refs.name.offsetHeight获取不到值问题

更新时间：2023年05月19日 09:36:41 作者：qq_36437172

这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue this.$refs.name.offsetHeight获取不到值

通过 vue 动态获取剩余区域的滚动高度中的需求，固定高度如果是一个组件（组件里使用 v-if ）时，我们无法通过之前的方式（this.$refs.name.offsetHeight）获取到数据，那我们怎么办呢？

<template>
  <div class="introduce" v-if="JSON.stringify(entryObj) !== '{}'">
    ...
  </div>
</template>

此刻我们可以在子组件mounted钩子中使用 nextTick，传递给父组件。

this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕 
  this.$emit('eventGetHeight',this.$el.offsetHeight);
});

父组件中监听eventGetHeight事件，并取得这个数据。

<introduce 
  :entryObj="intrObj" 
  v-show="!dialogShow" 
  @openDialog="open" 
  @eventGetHeight="getHeight" 
  ref="intr"
></introduce>

获取到屏幕高度和固定高度后，我们可以计算出内容区域滚动高度了。

getHeight(data){
  let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  this.scrollHeight = (clientHeight - data) +'px'
},

只需在内容区域动态设置属性即可实现。

<div style="overflow-x: hidden; overflow-y: scroll;" :style="{ height: scrollHeight }">
  ...
</div>

注意：调用的组件和 v-if 结合使用，且组件的数据是动态的，即高度也是动态的。

ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

通过渲染子组件成功之后（即获取到动态数据），传递给父组件，再进行计算滚动区域。

vue中ref的使用（this.$refs获取为空）

但是有个办法，我们可以使用

this.$nextTick(() => {
    // todo
})
setTimeout(() => {
    // todo
}, 0)

来得到数据

ref

本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的
$refs不是响应式的，只在组件渲染完成后才填充
用于元素或子组件注册引用信息，注册完成，将会注册在父组件$refs对象上

如果你获取到的总是空的，你注意一下

1、你在哪里调用，和你调用的对象

试试在mounted（）里面调用有效果没有
调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看

2、调用对象是不是数组列表

我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的，
后来才发现，this.$refs.name是一个数组，无法通过 .style 获取样式，
只能遍历这个this.$refs.name数组，在this.$refs.name[index]上设置样式

// 更新，这个说法有点问题

但是像高度宽度，可以通过offsetHeight，等来获取。

3、调用对象是否和v-if结合使用

ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

最后

在使用中，我发现$refs.style只能设置该对象的样式，获取出来的值都是空的

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue.js 图片上传并预览及图片更换功能的实现代码
这篇文章主要介绍了vue.js 图片上传并预览及图片更换功能，小编主要围绕我们日常使用功能的例子做讲解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08
详解vue3+element-plus实现动态菜单和动态路由动态按钮(前后端分离)
本文需要使用axios,路由,pinia,安装element-plus,并且本文vue3是基于js而非ts的,这些环境如何搭建不做描述,需要读者自己完成,感兴趣的朋友跟随小编一起看看吧
2023-11-11
vue3接口数据赋值对象,渲染报错问题及解决
这篇文章主要介绍了vue3接口数据赋值对象,渲染报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3实现pdf预览功能
在开发中,PDF预览和交互功能是一个常见的需求,无论是管理系统、在线教育平台,还是企业内部的知识库,能够高效地展示和操作PDF文件都能极大地提升用户体验,本文将详细介绍如何在Vue项目中实现pdf预览功能,需要的朋友可以参考下
2025-03-03
vue开发简单上传图片功能
这篇文章主要为大家详细介绍了vue开发简单上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
Vue基础学习之ref响应式数据、v-指令、computed
Vue3引入了全新的响应式系统,使得数据管理更为灵活和高效,这篇文章主要介绍了Vue基础学习之ref响应式数据、v-指令、computed的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-03-03
解决Vite无法分析出动态import的类型,控制台出警告的问题
这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue实现循环滚动图片
这篇文章主要为大家详细介绍了vue实现循环滚动图片，多图片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue之Element-Ui输入框显示与隐藏方式
这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
深入理解vue中的$set
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06