VueJS-使用$refs获取子宽度

Question

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

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

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

Answer 1

尝试使用$nextTick((：

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

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

如果这仍然不起作用(由于各种原因，有时可能会延迟超过该点(，那么您通常会被一个window.setTimeout((调用卡住，该调用中有一个笨拙的延迟值。

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

你不能做的一件事就是绑定到那个值并期望它发挥作用。$refs不是反应性的，DOM的任何元素属性也不是。