How can i sync scroll event of two vue components in non parent-child relation?

Issue

How can i sync scroll event of two vue component i a non-parent-child relation

Scrolling here …

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>

should be synced with:

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>

Solution

I have used the option with useEmitter.js described here: 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;
}

Answered By – jimmybondy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published