Vue 事件处理

在 Vue 中，事件处理是组件之间通信的重要方式之一。Vue 提供了简洁的语法来绑定事件，并支持多种事件处理方式。

---

## ✅ 一、基本事件绑定（`v-on` 指令）

Vue 使用 `v-on` 指令来监听 DOM 事件，例如点击、输入等。

### 1. 基本用法

```html
<template>
  <button v-on:click="handleClick">点击我</button>
</template>

也可以简写为：

```html
<button @click="handleClick">点击我</button>
```

> `@` 是 `v-on:` 的简写形式。

---

## ✅ 二、事件修饰符（Event Modifiers）

Vue 提供了一些事件修饰符，用于简化常见的操作。

| 修饰符       | 说明                           |
|--------------|--------------------------------|
| `.stop`      | 阻止事件冒泡                   |
| `.prevent`   | 阻止默认行为（如表单提交）     |
| `.capture`   | 使用事件捕获模式               |
| `.self`      | 只当事件是从当前元素触发时才触发 |
| `.once`      | 事件只触发一次                 |

### 示例：

```html
<a href="#" @click.prevent="doSomething">点击跳转</a>
<div @click.self="doSomething">只在自身点击时触发</div>
```

---

## ✅ 三、按键修饰符（Key Modifiers）

用于监听键盘事件，比如 `enter`、`tab`、`esc` 等。

### 示例：

```html
<input @keyup.enter="submitForm" placeholder="按回车提交">
```

Vue 支持以下常用键：

- `.enter`
- `.tab`
- `.delete`（或 `.del`）
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`

---

## ✅ 四、自定义事件（`$emit`）

在 Vue 中，子组件可以通过 `$emit` 向父组件发送自定义事件。

### 1. 子组件中触发事件

```vue

<template>
  <button @click="$emit('custom-event', 'Hello from child')">触发事件</button>
</template>
```

### 2. 父组件中监听事件

```vue

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(message) {
      console.log('收到子组件消息:', message);
    }
  }
}
</script>
```

---

## ✅ 五、事件参数传递

可以在事件处理函数中接收事件对象和额外参数。

### 示例：

```html
<template>
  <button @click="handleClick('hello', $event)">点击我</button>
</template>

---

## ✅ 六、使用 `v-on` 绑定多个事件

可以使用对象语法来绑定多个事件：

```html
<template>
  <div v-on="{ click: handleClick, mouseover: handleMouseOver }">鼠标悬停/点击</div>
</template>
```

---

## ✅ 七、使用 `@` 和 `v-on` 的区别

| 写法         | 说明                         |
|--------------|------------------------------|
| `@click`     | 简写形式，推荐使用           |
| `v-on:click` | 完整形式，功能相同           |

---

## ✅ 八、总结

| 功能             | 语法                          |
|------------------|-------------------------------|
| 基本事件绑定     | `@click="method"` 或 `v-on:click="method"` |
| 事件修饰符       | `@click.stop`                 |
| 按键修饰符       | `@keyup.enter="method"`       |
| 自定义事件       | `$emit('event')` / `@event="handler"` |
| 事件参数         | `@click="method(arg, $event)"` |

---

如果你有具体的场景（比如表单验证、父子通信、键盘事件等），我可以提供更详细的示例。需要吗？