Estoy tratando de acceder a una referencia en un componente secundario usando la API de composición de Vue3, pero no estoy seguro de cómo hacerlo. Me gustaría agregar un evento de desplazamiento a mainContentRef para poder hacer una solicitud de recuperación para obtener más datos dentro del componente principal, pero parece que no puedo acceder a la referencia en el componente principal para agregarle el detector de eventos.
Este es mi código (algunas partes eliminadas debido a que son innecesarias para este ejemplo):
<!-- 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>Puede utilizar el método defineExpose de vue y luego agregar una ref para su componente MainContent y acceder a él a través de eso.
<!-- 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>Ver también: https://vuejs.org/guide/essentials/template-refs.html#ref-on-component
Avísame si tienes alguna pregunta o si no funciona, ¡es un placer ayudarte!