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>
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 { defineProps, 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!