¿Cómo puedo sincronizar el evento de desplazamiento de dos componentes vue en una relación que no es padre-hijo?
Desplazando aquí...
BaseLayout.vue
<script setup> ... function logScrolling(event) { console.log("Scrolling to " + event.detail.currentY); // rightIonContent.value.$el.scrollToPoint(X, Y, 500); // this is not working } ... </script> <template> ... <ion-content :scroll-events="true" @ionScroll="logScrolling($event)" > <slot /> </ion-content> ... </template>debe sincronizarse con:
AppMenuRight.vue
<script setup> function ScrollingToPoint(X, Y) { rightIonContent.value.$el.scrollToPoint(X, Y, 500); } </script> <template> ... <ion-content :scroll-events="true" ref="rightIonContent"> ... </ion-content> ... </template>BaseLayout debe establecer el valor de desplazamiento en la tienda vuex. El otro componente puede observar esa propiedad y establecer el valor de desplazamiento del elemento en consecuencia en el observador
He usado la opción con useEmitter.js descrita aquí: Vue.js 3 Event Bus
import { getCurrentInstance } from 'vue' export default function useEmitter() { const internalInstance = getCurrentInstance(); const emitter = internalInstance.appContext.config.globalProperties.emitter; return emitter; }