源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

Vue3 事件处理

2026/04/22
33
0

引言

Vue 3 的事件处理用于监听并响应用户交互（点击、输入、键盘操作等），通过 v-on 指令（简写 @）绑定事件与处理逻辑，实现视图与数据的双向联动，是构建交互界面的核心功能

监听事件

v-on 指令用于监听 DOM 事件，简写为 @，事件触发时会执行对应的逻辑。根据业务复杂度，分为两种处理器写法。

内联事件处理器

适用于简单逻辑场景，直接在模板中编写单行 JavaScript 语句，无需定义独立方法。

<template>
  <div class="demo-box">
    <!-- 内联语句：点击直接修改响应式数据 -->
    <button @click="count++">计数 + 1</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 统一响应式数据
const count = ref<number>(0)
</script>

<style scoped>
.demo-box { padding: 16px; }
button { margin-right: 8px; }
</style>

方法事件处理器

当事件逻辑复杂时，内联写法难以维护，推荐将逻辑封装为独立方法，也是企业开发的标准写法。

<template>
  <div class="demo-box">
    <button @click="addCount">计数 + 1</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

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

// 封装事件处理方法
const addCount = () => {
  count.value++
}
</script>

方法传参与原生事件

支持传递自定义参数，也可以获取原生 DOM 事件对象 event，适配复杂交互需求。

<template>
  <div class="demo-box">
    <!-- 传递自定义参数 -->
    <button @click="setCount(10)">设置计数为 10</button>
    <!-- 获取原生事件对象 -->
    <button @click="showEventInfo">查看事件信息</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

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

const setCount = (num: number) => {
  count.value = num
}

// 获取原生 DOM 事件
const showEventInfo = (e: MouseEvent) => {
  console.log('触发元素：', e.target)
  alert('事件类型：' + e.type)
}
</script>

事件修饰符

Vue 3 内置事件修饰符，用于简化 DOM 事件的通用操作（阻止冒泡、阻止默认行为等），无需手动编写原生方法。

常用修饰符

  • .stop：阻止事件冒泡

  • .prevent：阻止元素默认行为（如表单提交、a 标签跳转）

  • .once：事件仅触发一次

  • .self：仅点击当前元素自身时触发

代码示例

<template>
  <div class="demo-box" @click="parentClick">
    <!-- .stop 阻止冒泡 -->
    <button @click.stop="addCount">阻止冒泡 + 1</button>
    <!-- .prevent 阻止默认跳转 -->
    <a href="https://vuejs.org" @click.prevent>阻止跳转</a>
    <!-- .once 仅执行一次 -->
    <button @click.once="resetCount">仅重置一次</button>
  </div>
</template>

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

const addCount = () => count.value++
const resetCount = () => count.value = 0
const parentClick = () => console.log('父元素被点击')
</script>

按键修饰符

专门用于键盘事件（@keyup / @keydown），仅按下指定按键时触发事件，Vue 3 内置了常用按键别名。

内置常用按键

  • .enter 回车键

  • .tab 制表键

  • .delete 删除 / 退格键

  • .esc 退出键

  • .space 空格键

  • .up / .down / .left / .right 方向键

代码示例

<template>
  <div class="demo-box">
    <input 
      type="text" 
      v-model="msg" 
      placeholder="输入内容按回车确认"
      <!-- 回车触发提交 -->
      @keyup.enter="submitMsg"
    >
    <p>输入内容：{{ msg }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0)
const msg = ref<string>('')

const submitMsg = () => {
  alert(`提交内容：${msg.value}`)
  msg.value = ''
}
</script>

系统按键修饰符

用于组合按键监听，必须与系统键同时按下才会触发事件。

常用系统修饰符

  • .ctrl

  • .alt

  • .shift

  • .meta (Windows 键 / Mac Command 键)

<!-- Ctrl + Enter 触发提交 -->
<input @keyup.ctrl.enter="submitMsg" v-model="msg">

鼠标按键修饰符

用于鼠标点击事件，限制仅指定鼠标按键触发逻辑。

  • .left 左键

  • .right 右键

  • .middle 中键

<button @click.left="leftClick">仅左键点击生效</button>

规范说明

废弃特性

Vue 3 已完全废弃 config.keyCodes 自定义按键修饰符，不再支持自定义键名（如 f1），官方不再推荐该用法。

替代方案

直接使用原生按键名，或在方法中通过 event.key 判断：

const handleKey = (e: KeyboardEvent) => {
  // 判断 F1 按键
  if (e.key === 'F1') {
    alert('按下 F1 键')
  }
}

最佳实践

  1. 简单逻辑用内联处理器，复杂逻辑封装为方法，提升代码可维护性；

  2. 优先使用事件修饰符，避免在方法中编写 e.preventDefault() 等原生代码；

  3. 键盘事件配合按键修饰符，简化判断逻辑；

  4. 一次性事件使用 .once，无需手动解绑；

  5. 避免在事件处理中编写冗余逻辑，复杂逻辑抽离为独立工具函数。

总结

  1. Vue 3 事件绑定用 @（v-on 简写），支持内联与方法两种处理器；

  2. 事件修饰符、按键修饰符极大简化了 DOM 交互逻辑；

  3. 所有事件可获取原生 event 对象，兼容复杂业务需求；

  4. Vue 3 废弃自定义键码，推荐使用原生按键名判断。