vue的$refs使用addEventListener

Vue中的`$refs`特性主要用于获取已渲染到DOM元素的引用，它提供了一种在模板实例化后通过JavaScript直接操作DOM的方式。然而，`$refs`本身并不是事件监听机制的一部分，它是静态的引用，用于查询。

如果你想要给某个使用了`ref`的元素添加事件监听器，通常会在组件的methods或生命周期钩子中进行，比如`mounted`钩子。这里是一个简单的例子：

// Vue组件模板
<template>
  <button ref="myButton">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 使用$refs访问dom元素
      const button = this.$refs.myButton;
      
      // 添加事件监听
      button.addEventListener('click', (event) => {
        console.log('Button clicked');
      });
    }
  },
  mounted() {
    // 当组件挂载后，执行handleClick函数并添加监听
    this.handleClick();
  }
};
</script>

在这个例子中，当用户点击按钮时，会打印出"Button clicked"。需要注意的是，由于`$refs`在组件卸载后可能会丢失，所以在不需要的时候应移除事件监听以避免内存泄漏。