How to access an element embedded in the slot of a child component using this.$refs.xxx in the parent component?

[kingzytgit]

There is a child component named AA:

<template>
    <div>
        <slot></slot>
    </div>
</template>

Then AA is used in the parent component:

<template>
    <AA>
        <div ref="k"></div>
    </AA>
</template>

In the parent component, you are unable to use this.$refs.k. How to solve this?

[RamonDonadeu]

What are you trying to achieve?

[OnlyWick]

Why use this.$slots?, just use ref();

<template>
    <AA>
        <div ref="k"></div>
    </AA>
</template>

<script setup lang="ts">
// ...
const k = ref();

</script>