在Vue中获取DOM元素的实际宽高

在 Vue 中获取 DOM 元素的实际宽高可以通过以下几种方式来实现：

一、使用 ref 引用

1. 在模板中给要获取宽高的 DOM 元素添加 ref 属性，例如：

   <div ref="myDiv"></div>
   

2. 在 Vue 实例的 mounted 钩子函数中通过 this.$refs 来访问该元素，并获取其宽高：

   mounted() {
        
   const divElement = this.$refs.myDiv;
   if (divElement) {
        
    const width = divElement.offsetWidth;
    const height = divElement.offsetHeight;
    console.log('宽度：', width);
    console.log('高度：', height);
   }
   }
   

二、使用 nextTick 确保 DOM 已渲染完成

有时候在获取 DOM 元素宽高时，DOM 可能还没有完全渲染好，这时就需要使用 nextTick 来确保在 DOM 更新后再去获取宽高。

mounted() {
   
  this.$nextTick(() => {
   
    const divElement = document.querySelector('#myDiv');
    if (divElement) {
   
      const width = divElement.offsetWidth;
      const height = divElement.offsetHeight;
      console.log('宽度：', width);
      console.log('高度：', height);
    }
  });
}

在上述代码中，this.$nextTick 会在下次 DOM 更新循环结束后执行回调函数，确保此时 DOM 已经完成渲染，然后再通过 document.querySelector 找到对应的 DOM 元素并获取宽高。

三、在子组件中获取父元素的宽高（跨级获取）

如果要在子组件中获取父元素的宽高，可以通过 $parent 来访问父组件实例，然后再通过上述的方式在父组件中获取宽高。

子组件模板：

<div ref="childDiv"></div>

子组件脚本：

mounted() {
   
  const parentElement = this.$parent.$refs.parentDiv;
  if (parentElement) {
   
    const width = parentElement.offsetWidth;
    const height = parentElement.offsetHeight;
    console.log('父元素宽度：', width);
    console.log('父元素高度：', height);
  }
}

父组件模板：

<div ref="parentDiv">
  <child-component></child-component>
</div>

在上述代码中，子组件通过 this.$parent 访问父组件实例，再通过父组件的 ref 属性（parentDiv）找到父元素，最后获取父元素的宽高。

总之，在 Vue 中获取 DOM 元素的实际宽高有多种方法，需要根据具体的场景和需求选择合适的方式来确保能够准确地获取到 DOM 元素的宽高信息。