vue 中 this.$refs.name.offsetHeight 获取不到值（进阶版）

通过 vue 中 this.$refs.name.offsetHeight 获取不到值 中的需求，【固定高度】的内容如果是通过接口获取，还是使用那种方法是不可行的。由于接口响应时间是长短不一的，也无法设置一个固定的定时器。那我们怎么办呢？

通常我们在请求和响应接口前后都会设置一个 loading 状态，如下：

getInfo() {
  this.showloading = true;
  this.$axios({ method: "get", url: "xxx", data: {} }).then(res => {
    this.showloading = false;
  });
},

当接口响应后，我们将 showloading 设置为 false。把 showloading 的传递给子组件中。子组件通过判断 showloading 的值，再去获取 子组件的高度，即所谓的【固定高度】。

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

这里我要提到 watch ，通过 watch 监听属性的变化，做出逻辑操作，代码如下：

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

当接口响应用户端之后，我们在通过 nextTick 获取子组件的高度。