Get the height of an element in Vue 3 functional component

Question

I've seen this: Get element height with Vuejs But from my understanding, functional component doesnt have this keyword. How can I get the height of a HTML element in vue. I'm from a React background and would just use refs there but refs in vue dont seem to be the same. Any idea?

Answer 1

Simple example using composition API:

<template>
    <div>
        <h1>Cool Title</h1>
        <BaseTestData ref="test"></BaseTestData>
    </div>
</template>

<script setup>
const test = ref(null)

onMounted(() => {
    console.log(test.value.$el.clientHeight)
})
</script>