vue3获取绑定事件的方法

在Vue 3中，我们可以通过多种方式来获取绑定到元素上的事件。最直接的方式是通过$listeners或者使用Composition API中的getCurrentInstance结合emit方法来处理，不过这些方式各有适用场景。

一、传统Options API方式

1. 使用this.$listeners

在Options API中，如果你想要在一个组件内部获取父组件传递过来的事件监听器，你可以使用this.$listeners。它会返回一个对象，这个对象包含了所有从父组件传递给当前组件的自定义事件。
```html

export default {
methods: {
handleCustomEvent() {
console.log('父组件监听到子组件触发的自定义事件');
}
}
}

html

export default {
mounted() {
console.log(this.$listeners); // 这里可以查看到父组件传递过来的事件
if (this.$listeners.customEvent) {
console.log('父组件绑定了customEvent事件');
}
}
}

</p>

<p>但是要注意的是，在Vue 3中<code>this.$listeners已经被废弃了，所以这种方法仅适用于一些特定的升级迁移场景。

二、Composition API方式

1. 使用getCurrentInstance

这是更推荐的做法。我们可以使用getCurrentInstance来获取当前组件实例，然后通过instance.emit来触发事件，同时也可以获取到绑定的事件信息。
```html

  

    
  



import { getCurrentInstance } from 'vue';
export default {
  setup() {
    const instance = getCurrentInstance();
    const triggerEvent = () => {
      console.log(instance.emits); // 查看绑定的事件
      if (instance.emits('customEvent')) {
        console.log('有customEvent事件被绑定');
        instance.emit('customEvent'); // 触发事件
      }
    };
    return {
      triggerEvent
    };
  }
}

2. 直接通过props和emits选项

我们可以在定义组件的时候，通过emits选项来声明组件可以触发的事件，这样不仅可以明确事件的存在，而且在触发事件时也有更好的类型提示。
```html

export default {
emits: ['customEvent'], // 声明可触发的事件
setup(props,{ emit }) {
const triggerEvent = () => {
emit('customEvent'); // 触发事件
};
return {
triggerEvent
};
}
}

```
这种方式更加直观，符合Vue 3的编程规范，也方便团队协作开发。