如何在挂载部分的组件上添加VueJS事件侦听器

Question

我有一个重要的组件，我想把一个事件监听器附加到button元素，它的类是qkb-bubble-btn。

我明白我应该把它放在mounted部分，但我得到以下错误:

TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')

下面是我添加监听器的方法:

<script>
import {VueBotUI} from 'vue-bot-ui'
import {subscribeUser} from "../helpers/subscriptionHandler";
//import {getAlerte} from "../helpers/alerteHandler";
export default {
//...
mounted() {
this.document.getElementsByClassName('qkb-bubble-btn ')[0].addEventListener('click', this.onBubbleClick);
},
beforeDestroy () {
navigator.serviceWorker.removeEventListener('message', event => {
this.printPush(event);
});
this.document.getElementsByClassName('qkb-bubble-btn ')[0].removeEventListener('click', this.onBubbleClick);
},
methods: {
onBubbleClick(){
console.log("click bubble")
}
},
}
</script>

如何将点击事件监听器添加到qkb-bubble-btn元素中?

Answer 1

您不需要自己添加事件侦听器，

您只需使用@和按钮上的事件名称:

<my-button @click="myClickMethod"/>

只有当元素在vue应用程序外部时才使用addEventListener，但如果它在应用程序内部，那么最好使用vue的方式

如果按钮位于另一个组件中，则需要使用$emit:

<my-button @click="$emit('click', $event)"/>

Answer 2

即使@lk77是正确的，我也可以通过删除this.document...前面的关键字this来解决我的问题