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

Question

我不知道如何添加addEventListener在 Vue 3.x 中向父级添加 an 。

我发现您可以使用以下代码获取父级：

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>是我想要在滚动时使用 EventListener 的元素，因为这是唯一div可滚动的元素overflow-y: auto;。

但因为<SwiperSlide>是 的一个组件，我必须在每个幻灯片元素swiper.js中添加 EventListener （例如等）<FirstSlide><SecondSlide>

这是一个例子，可以更好地理解我的问题。如果您向下滚动到脚本，您将看到我过去是如何做到的。

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

Answer 1

你可以试试沙盒

该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));
},