vue动态添加监听事件

在 Vue 中，可以使用 `v-on` 或 `@` 指令来绑定监听事件。如果要动态添加监听事件，可以使用 `v-on` 指令的对象语法或者使用 `addEventListener` 方法。以下是两种方式的示例代码：

1. 对象语法：

<template>
  <button v-on="listeners">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      listeners: {
        click: this.handleClick
      }
    }
  },
  methods: {
    handleClick() {
      console.log('点击了按钮')
    }
  }
}
</script>

在上面的代码中，通过绑定 `v-on` 指令的对象语法，将 `click` 事件监听器动态绑定到了 `button` 元素上。

2. `addEventListener` 方法：

<template>
  <button ref="btn">点击我</button>
</template>

<script>
export default {
  mounted() {
    this.$refs.btn.addEventListener('click', this.handleClick)
  },
  beforeDestroy() {
    this.$refs.btn.removeEventListener('click', this.handleClick)
  },
  methods: {
    handleClick() {
      console.log('点击了按钮')
    }
  }
}
</script>

在上面的代码中，使用 `$refs` 获取到 `button` 元素的引用，然后在 `mounted` 钩子函数中使用 `addEventListener` 方法动态添加 `click` 事件监听器，在 `beforeDestroy` 钩子函数中使用 `removeEventListener` 方法移除事件监听器。