【Vue】11 Vue技术——Vue 中的事件处理详解

文章目录

- 前言
- 一、事件绑定的基本语法
- 二、事件回调函数的定义位置
- [三、禁止在 methods 中使用箭头函数](#三、禁止在 methods 中使用箭头函数)
- [四、methods 中函数的 this 指向](#四、methods 中函数的 this 指向)
- 五、事件传参：如何传递额外参数
- - [1. 不传参（仅接收事件对象）](#1. 不传参（仅接收事件对象）)
  - [2. 传参 + 保留事件对象](#2. 传参 + 保留事件对象)
  - [3. 等效写法说明](#3. 等效写法说明)
- 六、完整示例解析
- 七、总结与最佳实践

前言

在 Vue.js 开发中，事件处理是实现用户交互的核心机制之一。通过 v-on 指令（或其简写形式 @），我们可以轻松地监听 DOM 事件并执行相应的 JavaScript 逻辑。本文将深入讲解 Vue 中事件的基本使用方式、注意事项以及常见用法，并结合实际代码示例进行说明。

一、事件绑定的基本语法

Vue 提供了两种等效的方式绑定事件：

完整写法 ：v-on:click="methodName"
简写形式 ：@click="methodName"

这两种写法功能完全一致，开发者可根据个人或团队编码风格选择使用。

html 复制代码

<button v-on:click="showInfo">点我提示信息(不传参)</button>
<!-- <button @click="showInfo">点我提示信息</button> --> <!-- v-on:可以写成@ -->

注释说明：v-on: 可以简写为 @，这是 Vue 提供的语法糖，使模板更简洁。

二、事件回调函数的定义位置

根据 Vue 的最佳实践，事件的回调函数应配置在 methods 对象中 ，并且通常定义在 Vue 实例（vm）上。

javascript 复制代码

const vm = new Vue({
  el: '#root',
  data: {
    name: '上高山'
  },
  methods: {
    showInfo(event) {
      alert('同学你好！');
      console.log(this); // 此处的 this 是 vm 对象
    }
  }
});

这样做的好处是：

逻辑集中管理；
支持响应式更新；
this 自动绑定到当前 Vue 实例。

三、禁止在 methods 中使用箭头函数

这是一个非常重要的注意事项！

注释原文强调："methods中配置的函数，不要用箭头函数！否则this就不是vm了。"

箭头函数没有自己的 this，它会继承外层作用域的 this。在 Vue 的 methods 中使用箭头函数会导致 this 指向 window（非严格模式）或 undefined（严格模式），从而无法访问 Vue 实例的数据和方法。

javascript 复制代码

// ❌ 错误示范：使用箭头函数
showInfo2: (event) => {
  console.log(this); // this 是 window，不是 vm！
}

正确做法是使用普通函数：

javascript 复制代码

// ✅ 正确写法
showInfo() {
  console.log(this); // this 是 vm 实例
}

四、methods 中函数的 this 指向

Vue 会自动将 methods 中定义的函数绑定到当前实例（vm 或组件实例）上。因此，在这些函数内部，this 始终指向 Vue 实例，可以直接访问 data、props、其他方法等。

javascript 复制代码

methods: {
  showInfo() {
    console.log(this.name); // 可以访问 data 中的 name
  }
}

五、事件传参：如何传递额外参数

有时我们需要在触发事件时传递自定义参数（如 ID、索引等）。Vue 允许我们在调用方法时显式传入参数，同时保留对原生事件对象 $event 的访问。

1. 不传参（仅接收事件对象）

html 复制代码

<button @click="showInfo">点我</button>

javascript 复制代码

showInfo(event) {
  // event 是原生 DOM 事件对象
}

2. 传参 + 保留事件对象

html 复制代码

<button @click="showInfo3(66, $event)">点我提示信息3(传参)</button>

javascript 复制代码

showInfo3(number, event) {
  alert('同学你好！！' + number);
  console.log(event); // 原生事件对象
}

关键点 ：当手动传参时，必须显式使用 $event 来获取事件对象，否则 event 参数将为 undefined。

3. 等效写法说明

注释中提到："@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。"

@click="demo"：Vue 自动将原生事件对象作为第一个参数传入。
@click="demo($event)"：显式传入事件对象，便于在需要额外参数时使用。

六、完整示例解析

结合你的 HTML 代码，我们来看三个按钮的行为差异：

showInfo ：标准方法，this 正确指向 vm，弹出提示。
showInfo2 ：使用箭头函数，this 指向 window，无法访问 vm 的数据（虽然本例中未使用 this，但存在隐患）。
showInfo3 ：传入数字 66 和 $event，展示了如何同时传递自定义参数和事件对象。

css 复制代码

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8"/>
        <title>事件的基本使用</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>

        <!--
        事件的基本使用：
        1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
        2. 事件的回调函数要配置在methods对象中，最好在vm上；
        3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
        4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
        5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
        -->

        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <button v-on:click="showInfo">点我提示信息(不传参)</button>
            <!-- <button @click="showInfo">点我提示信息</button> --> <!-- v-on:可以写成@ -->

            <button v-on:click="showInfo2">点我提示信息2(箭头函数)</button>

            <button @click="showInfo3(66, $event)">点我提示信息3(传参)</button> <!-- 给函数中传一个参数 -->
        </div>

         <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时产生生产提示

            
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'上高山'
                },
                methods:{
                    showInfo(event){
                        // console.log(event.target.innerText)
                    alert('同学你好！')
                    console.log(this) // 此处的this是vm对象
                },

                  showInfo2:(event)=>{ // 使用箭头函数以后，this是window对象
                        // console.log(event.target.innerText)
                    // alert('同学你好')
                    console.log(this) // 此处的this是vm
                },

                showInfo3(number, event){
                    alert('同学你好！！' + number + event)
                    console.log(number, event)
                }
                
            }


            })

         </script>
    </body>
</html>

七、总结与最佳实践

要点	说明
✅ 使用 `methods` 定义事件处理函数	保持逻辑清晰，支持响应式
❌ 避免在 `methods` 中使用箭头函数	否则 `this` 不再指向 Vue 实例
✅ 利用 `@` 简写 `v-on:`	提高代码可读性
✅ 需要传参时使用 `$event` 显式传递事件对象	确保能同时获取参数和事件信息
✅ 理解 `this` 的自动绑定机制	所有 `methods` 函数中的 `this` 都是当前 Vue 实例

通过合理使用 Vue 的事件系统，我们可以构建出高度交互且结构清晰的前端应用。牢记上述原则，将帮助你避免常见陷阱，写出更健壮的 Vue 代码。