VUE在组件的引用页面给组件添加事件

原创于 2020-09-06 11:00:15 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了在Vue中如何正确地在组件引用页面添加事件监听，包括使用@click.native语法糖来触发当前页面事件，以及在组件属性中使用v-on='$listeners'实现事件监听的传递。此外，还讲解了组件内部如何通过this.$emit发送自定义事件，以及在TypeScript中如何编写Vue组件的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE在组件的引用页面给组件添加事件

当我们在某个页面应用引用组件的时候，想要给这个引入的组件添加一些事件，像这样

     <cardinfo
       @click="goodclick"
       />

但是这样可能是无效的，因为这个事件是引用组件页面的事件，而不是组件本身的事件，所以组件内不能识别这个事件的来源。
在@click后面加native表示的是当前页面的事件

  <cardinfo
    @click.native="goodclick"
    />

另外，如果我们想，在任意页面都能直接写时间监听的话，可以直接在组件的属性中添加

 v-on='$listeners'

表示组件内部不对其做事件监听，在哪个地方监听，都可以使用

还有一种方式就是通过，组件内发送自定义事件
1.首先在组件内部监听事件。
2.通过this.$emit(‘click’)发送事件
3.父级处理事件

用ts编写vue时

@Emit('click') private emitClickEvent(event:MouseEvent){}   // 可以发送事件对象
private onclick(event:MouseEvent){
  this.emitClickEvent(event:MouseEvent)
}