vue3获取、设置元素高度的代码举例

setup(props) {
    console.log(props);
    const hd = ref(null);
    let allHeight = ref("");
    const test = ref(null);
    onMounted(() => {
      //可视区域高度
      allHeight.value = `${document.documentElement.clientHeight}`;
      //header组件高度
      let hdHeight = hd.value.$el.clientHeight;
    });
    return {
      hd,
      test,
      clienHeight,
    };
  },

<template>
  <div ref="top">
    <Header ref="hd" />
  </div>
  <Test ref="test" :style="testStyle" />
</template>

<script>
import Header from "./components/Header.vue";
import Test from "./components/Test.vue";
import { onMounted, reactive, ref } from "vue";
export default {
  name: "App",
  components: {
    Header,
    Test,
  },
  setup(props) {
    console.log(props);
    const hd = ref(null);
    const top = ref(null);
    const test = ref(null);
    let allHeight = ref("");
    let testStyle = reactive({
      height: "0px",
    });
    onMounted(() => {
      allHeight.value = `${document.documentElement.clientHeight}`;
      let hdHeight = hd.value.$el.clientHeight;
      let testHeight = allHeight.value - hdHeight;
      testStyle.height = testHeight + "px";
      console.log(top)
      console.log(hd)
      console.log(top.value.clientHeight)
      console.log(hd.value.$el.clientHeight)
    });
    return {
      hd,
      top,
      test,
      testStyle,
      allHeight,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
  /* margin-top: 60px; */
}
</style>