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

Question

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

根据updated钩子的文档:

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

......在那之前没关系,但文档还说明:

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

......似乎不禁止在updated钩子中设置反应数据.

结果非常不稳定,有时我会clientHeight渲染后插槽,有时甚至在渲染之前.

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

Answer 1

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