Vue事件处理

下面，我们来系统的梳理关于 Vue 事件处理 的基本知识点：

---

一、事件处理核心思想

Vue 通过 v-on 指令实现声明式事件绑定，将 DOM 事件与 Vue 实例方法关联。其核心优势在于：

• 自动处理 this 上下文绑定
• 支持多种事件修饰符简化开发
• 实现组件间的自定义事件通信

---

二、基础事件绑定

1. 直接方法绑定

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

methods: {handleClick() {console.log('按钮被点击')}
}

2. 内联语句

<button @click="count += 1">增加计数</button>

3. 传递事件对象

<!-- 自动传入原生事件对象 -->
<input @input="handleInput"><!-- 手动传递参数 + 事件对象 -->
<button @click="handleParams('参数', $event)">按钮</button>

methods: {handleParams(msg, event) {console.log(msg, event.target)}
}

---

三、事件修饰符体系

1. 事件流控制修饰符

修饰符	作用	等效原生操作
.stop	阻止事件冒泡	event.stopPropagation()
.prevent	阻止默认行为	event.preventDefault()
.capture	使用捕获模式	addEventListener 捕获阶段
.self	仅当事件源是元素自身时触发	if (event.target !== event.currentTarget) return
.once	事件只触发一次	自动移除事件监听

示例：

<form @submit.prevent="onSubmit"><div @click.stop="doSomething"></div>
</form>

2. 按键修饰符