vue3事件处理详解

一、事件绑定基础（v-on / @）

1. 基本语法

<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>

<script setup lang="ts">
const handleClick = () => {
  console.log('clicked')
}
</script>

要点

• @ 是 v-on: 的语法糖

• Vue 3 中事件函数通常定义在 setup() 或 <script setup> 中

• 事件名默认是 DOM 原生事件

---

2. 内联事件表达式

<button @click="count++">+</button>
<p>{{ count }}</p>

const count = ref(0)

说明

• 可直接写 JS 表达式

• 适合简单逻辑，不建议写复杂业务

---

二、事件参数与 $event

1. 获取事件对象

<button @click="handleClick">点击</button>

const handleClick = (event: MouseEvent) => {
  console.log(event.target)
}

Vue 会自动注入 $event

---

2. 同时传自定义参数 + 事件对象

<button @click="handleClick(1, $event)">点击</button>

const handleClick = (id: number, event: MouseEvent) => {
  console.log(id, event)
}

---

三、事件修饰符（重点）

1. 阻止冒泡 / 默认行为

修饰符	作用
.stop	event.stopPropagation()
.prevent	event.preventDefault()

<a href="#" @click.prevent>阻止默认</a>

<div @click="parent">
  <button @click.stop="child">子按钮</button>
</div>

---

2. 捕获、只触发一次

修饰符	作用
.capture	捕获阶段触发
.once	只执行一次

<button @click.once="submit">提交</button>

---

3. 键盘事件修饰符

<input @keyup.enter="submit" />
<input @keyup.esc="cancel" />

常用键：

• .enter

• .esc

• .tab

• .space

• .delete

• .up / down / left / right

---

4. 系统按键修饰符

<button @click.ctrl="doSomething">Ctrl + Click</button>
<button @keyup.alt.enter="submit" />

支持：

• .ctrl

• .alt

• .shift

• .meta（Mac Command / Windows Win）

---

5. 鼠标按钮修饰符

<button @click.left>左键</button>
<button @click.right.prevent>右键</button>
<button @click.middle>中键</button>

---

四、事件处理与 Composition API

1. setup 中事件绑定（推荐）

<script setup lang="ts">
const handleSubmit = () => {
  console.log('submit')
}
</script>

<template>
  <button @click="handleSubmit">提交</button>
</template>

---

2. 使用 ref 操作 DOM 绑定事件（不推荐优先）

<template>
  <button ref="btn">按钮</button>
</template>

<script setup lang="ts">
const btn = ref<HTMLButtonElement>()

onMounted(() => {
  btn.value?.addEventListener('click', () => {
    console.log('native click')
  })
})
</script>

建议

• 优先使用 @click

• 仅在第三方库或特殊场景操作 DOM

---

五、自定义事件（组件通信，核心）

1. 子组件触发事件（emit）

<!-- Child.vue -->
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'update', value: number): void
}>()

const add = () => {
  emit('update', 1)
}
</script>

<template>
  <button @click="add">+1</button>
</template>

---

2. 父组件监听事件

<Child @update="handleUpdate" />

const handleUpdate = (val: number) => {
  console.log(val)
}

---

3. 事件命名规范（重要）

场景	推荐
组件事件	kebab-case
v-model	update:modelValue

emit('update:modelValue', newValue)

---

六、v-model 本质是事件

1. v-model 等价写法

<Child v-model="value" />

等价于：

<Child
  :modelValue="value"
  @update:modelValue="value = $event"
/>

---

2. 多个 v-model（Vue 3 特性）

<Child v-model:title="title" v-model:visible="visible" />

子组件：

emit('update:title', 'new title') emit('update:visible', true)

---