vue怎么让这个 this.sideHeight = this.$refs.verticalSide.offsetHeight; 执行完再生成dom
时间: 2024-09-13 17:03:16 浏览: 25
在Vue中,如果你需要在组件的`data`属性中赋值为DOM元素的尺寸,通常是在`mounted`钩子中进行,因为`mounted`钩子是在组件的模板编译之后执行的,此时DOM已经被创建并且是可用的。以下是如何使用`this.$refs`来获取DOM元素并在其上设置属性的示例:
```javascript
<template>
<div>
<div ref="verticalSide"></div>
</div>
</template>
<script>
export default {
data() {
return {
sideHeight: null,
};
},
mounted() {
this.sideHeight = this.$refs.verticalSide.offsetHeight;
// 此时this.$refs.verticalSide已经是可用的DOM元素
}
}
</script>
```
这段代码中,我们在模板中给一个`div`元素添加了一个`ref`属性,这个`ref`属性的值是`verticalSide`。在组件的`mounted`钩子函数中,我们可以通过`this.$refs.verticalSide`访问到这个DOM元素,并且可以获取到它的`offsetHeight`属性,然后将这个值赋给`data`中的`sideHeight`属性。
需要注意的是,直接在模板中使用`this.sideHeight = this.$refs.verticalSide.offsetHeight`是不可行的,因为模板编译时,DOM还未渲染,`this.$refs.verticalSide`是`undefined`。