Vue.js VueJS-使用$refs获取子宽度

我正在尝试提取VueJS中的子组件的

clientWidth

。我正在调用

$refs

inside

mounted

，并将其值分配给某些数据：

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

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

尝试使用$nextTick（）

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

如果这仍然不起作用（由于各种原因，它有时会延迟到该点之外），那么您通常会被一个包含笨拙延迟值的window.setTimeout（）调用所困扰

在这种情况下，更好一点但需要更多工作的是一个window.setInterval（）hander，它循环等待最终绘制元素并获得宽度

---

你不能做的一件事是绑定到该值并期望它工作

$refs

不是被动的，DOM的任何元素属性也不是被动的。

感谢您的建议，我希望其中一个可以解决我的问题。

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