No sé cómo agregar un addEventListener al padre en Vue 3.x.

Descubrí que puedes obtener el padre usando este código:

 import { getCurrentInstance, onMounted } from 'vue' onMounted(() => { console.log(getCurrentInstance().parent) })

Pero, ¿cómo obtengo el elemento HTML para poder agregarle el oyente?

Actualmente estoy tratando de migrar mi código de Vue 2.x a Vue 3.x.

En Vue 2.x, podría agregar fácilmente un EventListener a un elemento específico :

 mounted() { this.$el.addEventListener('scroll', throttle(this.handleScroll, 50)); }, beforeDestroy() { this.$el.removeEventListener('scroll', throttle(this.handleScroll, 15)); },

Muy importante : no quiero agregar el oyente al elemento de window o al elemento de document del navegador.

Quiero saber el estado de desplazamiento de un elemento en particular. Es posible que el estado de desplazamiento del navegador ni siquiera se haya movido. Echa un vistazo a esta imagen:

Como puede ver, solo puede desplazarse dentro del cuadro div donde ve el texto del marcador de posición.

Ahora a mi problema:

Estoy usando swiper.js para generar muchas diapositivas una al lado de la otra.

La estructura del código se parece a esto:

 <SwiperWrapper> <SwiperSlide> <FirstSlide /> </SwiperSlide> <SwiperSlide> <SecondSlide /> </SwiperSlide> <SwiperSlide> <ThirdSlide /> </SwiperSlide> </SwiperWrapper>

<SwiperSlide> es el elemento en el que quiero tener un EventListener en desplazamiento, porque este es el único elemento div que se puede desplazar debido a overflow-y: auto; .

Pero debido a que <SwiperSlide> es un componente de swiper.js , tengo que agregar EventListener dentro de cada elemento de diapositiva (por ejemplo, <FirstSlide> , <SecondSlide> , etc.)

Aquí hay un ejemplo para entender mejor mi problema. Si se desplaza hacia abajo hasta el script, verá cómo lo hice en el pasado.

https://codesandbox.io/s/swiper-navigation-vue-forked-vem09w?file=/src/FirstSlide.vue