标签

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