在vue.js 2中,一旦渲染了插槽,就测量组件的高度

时间:2017-02-02 08:33:53

标签: vue.js vuejs2

我正在寻找一种方法来在渲染其插槽(在DOM中)之后读取组件的高度(clientHeight),然后将结果设置为反应数据以进行进一步的计算。

根据updated钩子的文档:

  

调用此挂钩时,组件的DOM将被更新,因此您可以在此处执行与DOM相关的操作

......在此之前没问题,但文档还说明了:

  

但是,在大多数情况下,你应该避免改变钩子内的状态

......似乎不禁止在updated挂钩中设置被动数据。

结果非常不稳定,有时候我会在渲染插槽后得到clientHeight,有时候在渲染它们之前得到UISynchronize

似乎在适当的时候调用了'updated'钩子,但更改此钩子中的被动数据并不能系统地工作。

测试:https://jsfiddle.net/4wv9f052/5/

1 个答案:

答案 0 :(得分:2)

使用nextTick

Vue.nextTick(() => {
  this.height = this.$el.clientHeight;
});

https://jsfiddle.net/4wv9f052/9/