vue事件如何实现

Vue 事件实现方法

在 Vue 中，事件处理是通过 v-on 指令或简写 @ 实现的。以下是常见的事件处理方式：

1. 内联事件处理器

直接在模板中编写事件处理逻辑：

<button @click="count++">Add 1</button>

2. 方法事件处理器

调用组件中定义的方法：

<button @click="greet">Greet</button>

methods: {
  greet(event) {
    alert('Hello!')
    console.log(event) // 原生事件对象
  }
}

3. 事件修饰符

Vue 提供了事件修饰符来简化常见事件处理需求：

• .stop：阻止事件冒泡
• .prevent：阻止默认行为
• .capture：使用捕获模式
• .self：仅当事件从元素本身触发时调用
• .once：事件只触发一次
• .passive：提升滚动性能

示例：

<form @submit.prevent="onSubmit"></form>
<a @click.stop.prevent="doThat"></a>

4. 按键修饰符

处理键盘事件时可以使用按键修饰符：

<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

5. 系统修饰键

处理组合键事件：

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething"></div>

6. 自定义事件

子组件向父组件通信：

// 子组件
this.$emit('my-event', payload)

// 父组件
<child-component @my-event="handleEvent"></child-component>

7. 事件总线

对于非父子组件通信，可以使用事件总线：

// 创建事件总线
const EventBus = new Vue()

// 发送事件
EventBus.$emit('event-name', data)

// 接收事件
EventBus.$on('event-name', data => {
  // 处理数据
})

8. 原生事件绑定

要在组件上绑定原生事件，使用 .native 修饰符：

<my-component @click.native="handleClick"></my-component>

9. 鼠标按钮修饰符

处理特定鼠标按钮事件：

<button @click.right="rightClick">Right Click</button>

10. 事件参数传递

向事件处理函数传递额外参数：

<button @click="greet('Hello', $event)">Greet</button>

methods: {
  greet(message, event) {
    console.log(message, event)
  }
}