标签下的Vue元素高度答案

【问题标题】：Vue element height under a tab标签下的Vue元素高度
【发布时间】：2017-12-03 00:56:05
【问题描述】：

我目前有一个组件最初没有显示，因为它位于选项卡下。该组件获取放置在未命名默认插槽内的元素的高度，如下所示：

this.$el.offsetHeight

这将失败，因为该元素未显示，因此我实现了一个事件总线，当单击选项卡时，我触发一个事件，让组件知道他可以读取高度。

我遇到的问题是该选项卡显然需要一些时间来呈现。当我尝试立即阅读offsetHeight 时，它不起作用。

但是，当我在读取高度的函数周围抛出 setTimeout 时，只有 50ms 延迟，它工作得非常好。

我不想依赖像50ms 这样的任意对象。 Vue 有什么方法可以让我知道内容何时实际显示在此处？

从发送到事件总线的事件到另一个组件处理事件之间存在这样的延迟是否正常？

【问题讨论】：

【解决方案1】：

Vue 使用异步更新队列来进行 DOM 更改（请参阅 https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue），因此请使用 Vue.nextTick 函数来读取 offsetHeight：

Vue.nextTick(() => {
    // here the value will be set
    this.$el.offsetHeight
})

【讨论】：