Vue3+Nuxt3子组件emit高度值仅在代码修改后生效的问题求助

• Child组件高度计算时机过早：组件初始化阶段（如直接在created或mounted钩子执行高度计算），DOM元素可能还未完全渲染完成，此时获取的高度为0或不准确值，父组件接收后无法得到正确结果。当修改父组件内容触发重新渲染时，Child组件再次执行高度计算逻辑，此时DOM已就绪，才能传递正确高度。
• 未适配动态/异步内容渲染：如果Child组件内存在异步加载内容（如接口返回数据），初始计算高度时内容还未渲染，导致高度计算错误；后续父组件重新渲染触发Child组件更新，内容已加载完成，高度才恢复正确。

方法1：用nextTick延迟高度计算 #

在Child组件的mounted钩子中，通过nextTick确保DOM完全渲染后再计算高度并emit：

// ChildComponent.vue
<script setup>
import { ref, onMounted, nextTick } from 'vue'

const blockRef = ref(null)
const emit = defineEmits(['update-height'])

onMounted(async () => {
  await nextTick()
  if (blockRef.value) {
    const height = blockRef.value.offsetHeight
    emit('update-height', height)
  }
})
</script>

<template>
  <div ref="blockRef" class="child-block">
    <!-- 组件内容 -->
  </div>
</template>

方法2：监听元素尺寸变化（适配动态内容） #

如果Child组件内容会动态变化（如展开折叠、异步加载），使用ResizeObserver监听元素尺寸，实时更新高度：

// ChildComponent.vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const blockRef = ref(null)
const emit = defineEmits(['update-height'])
let resizeObserver = null

const updateHeight = () => {
  if (blockRef.value) {
    const height = blockRef.value.offsetHeight
    emit('update-height', height)
  }
}

onMounted(() => {
  updateHeight()
  resizeObserver = new ResizeObserver(updateHeight)
  blockRef.value && resizeObserver.observe(blockRef.value)
})

onUnmounted(() => {
  if (resizeObserver && blockRef.value) {
    resizeObserver.unobserve(blockRef.value)
  }
})
</script>

方法3：父组件触发主动更新（临时方案） #

若暂时无法修改Child组件，可在父组件onMounted中通过nextTick触发Child组件的高度计算（需Child组件暴露对应方法）：

// pages/index.vue
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import ChildComponent from '@/components/ChildComponent.vue'

const puzzleSelectBlockHeight = ref(0)
const childRef = ref(null)

onMounted(async () => {
  await nextTick()
  childRef.value?.calculateHeight()
})
</script>

<template>
  <ChildComponent ref="childRef" @update-height="h => puzzleSelectBlockHeight = h" />
</template>

内容的提问来源于stack exchange，提问作者VueVirtuoso