VueJS - 使用 $refs 获取子宽度

【问题标题】：VueJS - Get child width using $refsVueJS - 使用 $refs 获取子宽度
【发布时间】：2021-07-14 16:21:55
【问题描述】：

我正在尝试提取 VueJS 中子组件的 clientWidth。我在mounted 中调用$refs，并将其值分配给一些数据：

this.width = this.$refs.refName.clientWidth

问题是这个组件的宽度被定义为它的父组件的 100%。但是根据 Vue 生命周期，子 DOM 将在其父 DOM 之前挂载。这会导致子组件的宽度在挂载时始终为 0，因为它的父组件尚未渲染。
我唯一的解决方案是在 CSS 中硬编码值，但我想避免这种情况。达到预期效果的最佳方法是什么？

【问题讨论】：

【解决方案1】：

尝试使用 $nextTick()：

this.$nextTick(
    () => { this.width = this.$refs.refName.clientWidth); }
);

这将在完成所有未决的 Vue 工作和浏览器更新后运行。因此，它应该在该点捕获元素。

如果这仍然不起作用（由于各种原因，有时可能会延迟超过该时间点），您通常会遇到一个带有 kludgy 延迟值的 window.setTimeout() 调用。

在这种情况下更好一点，但更多的工作是一个 window.setInterval() 处理程序，它循环等待元素最终被绘制并获得宽度。

您不能做的一件事是绑定到该值并期望它起作用。 $refs 不是反应性的，也不是 DOM 的任何元素属性。

【讨论】：