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 组件的计算属性详解
这篇文章主要介绍了VUE组件的计算属性详解，使用计算机属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算机属性，除非你不希望得到缓存，下文来了解具体详情
2022-06-06
Vue3中当v-if和v-for同时使用时产生的问题和解决办法
封装一个组件时,我使用到了v-for和v-if,它们在同一标签内,总是提示v-for循环出来的item在实例中没有被定义,查询资料后原因是因为v-for和v-if在同级使用时,v-if优先级比v-for高,所以本文给大家介绍了Vue3中当v-if和v-for同时使用时产生的问题和解决办法
2024-07-07
vue项目使用node连接数据库的方法(前后端分离)
这篇文章主要介绍了vue项目使用node连接数据库（前后端分离），本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-12
教你三分钟掌握Vue过滤器filters及时间戳转换
这篇文章教你三分钟掌握Vue过滤器filters及时间戳转换,本文将结合时间戳转换的例子带你快速了解filters的用法,需要的朋友可以参考下
2023-03-03
vue组件三大核心概念图文详解
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节，感兴趣的朋友跟随小编一起看看吧
2019-05-05
vue3中的this.$set写法举例
在Vue2中,由于数据响应式是利用object.definedProperty()实现的,无法深层监听数据变化,因此提供了$set方法来解决数据变化视图未实时更新的问题,然而,在Vue3中,数据响应式使用ES6的proxy进行数据代理,因此废弃了$set的概念
2024-10-10
vue中跨域以及sessionId不一致问题及解决
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue开发中如何在js文件里使用pinia和组件同步
在JavaScript文件中封装涉及到使用Pinia的方法时,发现Pinia和组件内容并不同步,二者的状态是独立的,解决办法是,在新建对象的时候,将Pinia作为参数传入,本文给大家介绍vue开发中如何在js文件里使用pinia和组件同步,感兴趣的朋友一起看看吧
2024-10-10
vue实现局部刷新的实现示例
这篇文章主要介绍了vue实现局部刷新的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
这篇文章主要介绍了vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07