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>

zlowe · Accepted Answer · 2022-11-23 16:05:33Z

27

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!

edited Nov 23, 2022 at 16:05

answered Jul 14, 2022 at 16:39

zlowe

6027 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bryan88 Over a year ago

Oh wow, i didn't know you could do that! I'll try the defineExpose method as i've not come across this! I'll try and implement it and see how it goes! Thank you for your help!

Bryan88 Over a year ago

Using define exposed within the main content component and using a ref on the child component worked wonders! I have successfully logged out the div which will (hopefully) now allow me to attach my event listener onto it! Thank you!

van_folmert Over a year ago

you're using defineExpose but importing defineProps, is it intentional or mistake?

WestFarmer Over a year ago

mainContentComponent.value.mainContentRef.value ... this is not cool.

Hu Cai · Accepted Answer · 2022-11-16 01:39:09Z

1

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>

answered Nov 16, 2022 at 1:39

Hu Cai

991 silver badge5 bronze badges

3 Comments

Whitespacecode Over a year ago

How is this any better then the accepted answer that actually using a child component.

Hayyaun Over a year ago

@Whitespacecode it took me time to read and understand the difference after I saw your comment. and now I just realized that it's a cool trick.

Whitespacecode Over a year ago

@Hayyaun there are better ways, i just used OP question to build the answer that works on his example. You should just use defineExpose in the child component to have access to child component stuff

Collectives™ on Stack Overflow

Vue3 composition API - accessing child ref

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related