事件处理

这一课你将能做到

1. 用 v-on 绑定原生事件和自定义事件
2. 使用事件修饰符控制事件行为
3. 使用按键修饰符处理键盘事件
4. 在父子组件间通过自定义事件通信

为什么要学

事件是用户与页面的「对话方式」。点击、输入、滚动、提交，全靠事件驱动。Vue 把原生 DOM 事件封装得更易用，还提供了修饰符这种「快捷方式」。

人话：事件就像「门铃」。用户按门铃（触发事件），你听到后去开门（执行函数）。修饰符就是门铃的「附加功能」：只响一次、只响特定铃声、阻止推销员等。

先建立图像

<script setup>
import { ref } from 'vue'
const count = ref(0)

function handleClick(e) {
  console.log('事件对象', e)
  count.value++
}
</script>

<template>
  <button @click="handleClick">点击</button>
  <button @click="count++">内联</button>
  <button @click="(e) => console.log(e)">箭头函数</button>
</template>

跟着做

步骤 1：v-on 基础用法

<script setup>
import { ref } from 'vue'
const msg = ref('')

function greet(name) {
  msg.value = `你好，${name}`
}
</script>

<template>
  <!-- 方法名 -->
  <button @click="greet('张三')">打招呼</button>
  
  <!-- 内联语句 -->
  <button @click="msg = '内联'">内联</button>
  
  <!-- 访问原生事件对象 -->
  <button @click="(e) => console.log(e.target)">事件对象</button>
</template>

步骤 2：事件修饰符

<template>
  <!-- 阻止默认行为（如表单提交跳转） -->
  <form @submit.prevent="onSubmit">...</form>

  <!-- 阻止冒泡（不触发父元素事件） -->
  <div @click="parent">
    <button @click.stop="child">阻止冒泡</button>
  </div>

  <!-- 只触发一次 -->
  <button @click.once="doOnce">只点一次</button>

  <!-- 捕获模式（从外到内） -->
  <div @click.capture="capture">捕获</div>

  <!-- 只在事件目标是元素本身时触发 -->
  <div @click.self="onlySelf">只有点自己才触发</div>
</template>

修饰符可以链式：@click.stop.prevent。

步骤 3：按键修饰符

<script setup>
function onEnter() { console.log('回车') }
function onEsc() { console.log('ESC') }
</script>

<template>
  <!-- 特定按键 -->
  <input @keyup.enter="onEnter" placeholder="回车触发">
  <input @keyup.esc="onEsc" placeholder="ESC 触发">
  
  <!-- 组合键 -->
  <input @keyup.ctrl.enter="onEnter" placeholder="Ctrl+Enter">
  
  <!-- 系统修饰键 -->
  <button @click.ctrl="onCtrlClick">Ctrl+点击</button>
</template>

常用按键别名：.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。

步骤 4：自定义事件（子传父）