tab下的vue元素高度

Question

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

this.$el.offsetHeight

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

我运行遇到的问题是标签显然需要一点时间来呈现。当我尝试立即阅读 offsetHeight 时，它不起作用。

然而，当我在读取高度的函数周围抛出一个 setTimeout 时，只有 50ms 延迟它工作得很好。

不过，我不想依赖 50ms 这样的任意行为。当内容实际显示在这里时，Vue 有什么方法可以让我知道吗？

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

Answer 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
})

Vue element height under a tab