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不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

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