vue 取出上一层div层的高度

你可以使用 $refs 来获取上一层的 div 元素，然后通过 JavaScript 的 offsetHeight 属性来获取其高度。具体代码如下：

<template>
  <div ref="parent">
    <div>
      <!-- 子元素 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取上一层 div 元素的高度
    const parentHeight = this.$refs.parent.offsetHeight;
    console.log(parentHeight);
  }
};
</script>

在上面的代码中，我们通过 $refs.parent 获取到上一层 div 元素，并通过 offsetHeight 属性获取到其高度。

相关问题

vue3获取一个div的高度

可以使用Vue3中的ref属性获取DOM元素，然后再使用offsetHeight属性获取div的高度。示例代码如下：

HTML：

<div ref="myDiv">这是一个div</div>

JavaScript：

import {ref, onMounted} from 'vue';

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      const divHeight = myDiv.value.offsetHeight;
      console.log('div的高度为：', divHeight);
    });

    return {
      myDiv
    }
  }
}

vue 监听 div 高度

要监听div的高度变化，可以使用Vue的watch和ref属性来实现。具体步骤如下：
1. 在div标签上添加ref属性，例如：ref="myDiv"。
2. 在Vue的data中定义一个变量，例如：divHeight。
3. 在Vue的watch中监听myDiv的高度变化，如果高度发生变化则将新的高度赋值给divHeight变量。

以下是示例代码：

<template>
  <div ref="myDiv">
    // div内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      divHeight: 0
    }
  },
  watch: {
    'myDiv.offsetHeight'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.divHeight = newVal
      }
    }
  }
}
</script>