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只能设置该对象的样式，获取出来的值都是空的

总结

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