Vue 3.0：如何将addEventListener添加到父元素？

Question

我不知道如何在Vue 3.x中为父元素添加addEventListener。

我发现可以使用以下代码获取父元素：

import { getCurrentInstance, onMounted } from 'vue'

onMounted(() => {
    console.log(getCurrentInstance().parent)
})

但我要如何获得HTML元素以便添加监听器呢？

---

我目前正在尝试将我的代码从Vue 2.x迁移到Vue 3.x。

在Vue 2.x中，您可以轻松地向特定元素添加EventListener：

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

非常重要：我不想将监听器添加到浏览器的window元素或document元素上。

我想知道特定元素的滚动状态。浏览器的滚动状态甚至可能没有改变。看一下这张图片：

如您所见，您只能在包含占位文本的div框内滚动。

现在是我的问题：

我正在使用swiper.js生成许多相邻的幻灯片。

代码结构类似于：

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

<SwiperSlide> 是我想要添加滚动事件的元素，因为这是唯一一个由于 overflow-y: auto; 可以滚动的 div 元素。

但是由于 <SwiperSlide> 是来自于 swiper.js 的一个组件，我必须在每个幻灯片元素（比如 <FirstSlide>、<SecondSlide> 等）内部添加事件监听器。

以下是一个示例，以更好地理解我的问题。如果你向下滚动到脚本部分，你将看到我过去是如何做的。

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

- Philipp Mochine

---

你尝试过在<SwiperSlide>中添加一个id，并在实际的幻灯片元素中使用document.getElementById('someID')引用它吗？ - Amats

@Amats 很好的观点，我考虑过，但我不喜欢手动创建 ID 然后通过 prop 发送信息的方式。 - Philipp Mochine

Answer 1

你可以尝试使用 Sandbox。 addEventListener 函数可在父级的 subTree.el 上调用。

例如：

const parentHTML = getCurrentInstance().parent.subTree.el
parentHTML.addEventListener('click', () => console.log('click'))

因此，您可以执行以下操作：

data: () =>({
    parent: null
}),
mounted() {
    this.parent = getCurrentInstance().parent.subTree.el;
    this.parent.addEventListener('scroll', throttle(this.handleScroll, 50));
},
beforeDestroy() {
    this.parent.removeEventListener('scroll', throttle(this.handleScroll, 15));
},

- Amats