Vue3 composition API - accessing child ref

Question

I am trying to access a ref in a child component using the Vue3 composition API, but i am unsure of how to do so. I would like to add a scroll event to the mainContentRef so i can do a fetch request to grab more data within the parent component but i can't seem to access the ref in the parent component to add the event listener to it

This is my code (some parts removed due to being unnecessary for this example):

<!-- MAIN COMPONENT -->
<template>
    <PageWrap>
        <template v-slot:content>
            <MainContent>
                <template v-slot:content />
            </MainContent>
        </template>
    </PageWrap>
</template>

<script setup>

//access mainContentRef here because this is where the fetch request will be

</script>


<!-- MAIN CONTENT COMPONENT -->
<template>
    <div id="main-content" ref='mainContentRef'>
        <slot name='content'></slot>
    </div>
</template>

<script setup>

    import { defineProps, ref } from 'vue';

    const mainContentRef = ref(0);

</script>

Answer 1

You could utilize vue's defineExpose method and then add a ref for your MainContent component and access it through that.

<!-- MAIN COMPONENT -->
<template>
    <PageWrap>
        <template v-slot:content>
            <MainContent ref="mainContentComponent">
                <template v-slot:content />
            </MainContent>
        </template>
    </PageWrap>
</template>

<script setup>
    const mainContentComponent = ref()
    
    // Now you can do:
    mainContentComponent.value.mainContentRef.value
</script>


<!-- MAIN CONTENT COMPONENT -->
<template>
    <div id="main-content" ref="mainContentRef">
        <slot name='content'></slot>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    
    const mainContentRef = ref(0)
    
    defineExpose({
        mainContentRef
    })
</script>

See Also: https://vuejs.org/guide/essentials/template-refs.html#ref-on-component

Let me know if you have any questions or it doesn't work, happy to help!

Answer 2

you can try:

<!-- MAIN CONTENT COMPONENT -->
<template>
    <div id="main-content" ref='mainContentRef'>
        <slot name='content'></slot>
    </div>
</template>

<script setup>

    import { defineProps, ref } from 'vue';

    const mainContentRef = ref(null);

     // Now you can do:
     mainContentRef.value.children[0]

</script>