Vue @change事件传参与$event取值及无参调用区别

脚本专家

在Vue组件开发中，@change常用于监听表单控件或开关组件的状态变化。本文围绕一个switch组件的@change用法展开，说明如何通过事件对象取值、如何不传组件事件只执行其它操作，以及如何同时传递事件对象和自定义参数。原文代码基于Options API写法。

一、通过@change获取组件信息
模板中可以写成 @change="handleIsUsedChange" 或 @change="handleIsUsedChange($event)"。两者都会把组件change事件对象传给处理函数。处理函数接收到的val中，可通过 val.detail.value 取得当前值，原文取值为 true 或 false。示例：

2. <template>
3.   <switch
4.     :checked="isUsed"
5.     @change="handleIsUsedChange"
6.     color="#1890FF"
7.   />
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       isUsed: 'true'
15.     }
16.   },
17.   methods: {
18.     handleIsUsedChange(val) {
19.       this.isUsed = val.detail.value // true or false
20.     }
21.   }
22. }
23. </script>

复制代码

也可以写成：

2. @change="handleIsUsedChange($event)"

复制代码

处理函数仍为 handleIsUsedChange(val)，val.detail.value 表示开关当前值。color="#1890FF" 用于修改switch颜色。这里要注意：如果直接写方法名，Vue会默认传入事件对象；如果写成 handleIsUsedChange($event)，则是显式传入事件对象。

二、不传递组件信息，只执行其它操作
如果@change中写成 handleIsUsedChange()，则不会把组件事件对象传给方法。此时方法形参val取不到值，结果为 undefined。这种写法适合只希望在change触发时执行额外操作，而不需要读取组件当前值的场景。示例：

2. <template>
3.   <switch
4.     :checked="isUsed"
5.     @change="handleIsUsedChange()"
6.     color="#1890FF"
7.   />
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       isUsed: 'true'
15.     }
16.   },
17.   methods: {
18.     handleIsUsedChange(val) {
19.       // val 取到的值 undefined
20.       // 这里可以执行其它操作
21.     }
22.   }
23. }
24. </script>

复制代码

三、同时传递组件信息和自定义参数
当既需要拿到change事件对象，又需要传入普通参数时，需要显式传入 $event，并继续追加参数。例如：

2. <template>
3.   <switch
4.     :checked="isUsed"
5.     @change="handleIsUsedChange($event, '参数')"
6.     color="#1890FF"
7.   />
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       isUsed: 'true'
15.     }
16.   },
17.   methods: {
18.     handleIsUsedChange(val, param) {
19.       // val.detail.value => true or false
20.       // param => '参数'
21.       this.isUsed = val.detail.value
22.     }
23.   }
24. }
25. </script>

复制代码

其中 val.detail.value 是组件的当前值，param 是自定义参数。这样可以在处理开关状态变化的同时，把额外上下文传给同一个方法。

四、用法差异与排查思路
1. @change="handleIsUsedChange" 和 @change="handleIsUsedChange($event)"：都能在方法中拿到事件对象，val.detail.value 可用于取值。
2. @change="handleIsUsedChange()"：方法中的val为undefined。如果发现处理函数里读不到detail.value，先检查模板中是否带了括号且没有传$event。
3. 需要“事件对象 + 自定义参数”时，必须写 @change="handleIsUsedChange($event, '参数')"，不能只写方法名，也不能漏掉$event。
4. 如果只是改变switch颜色，使用color="#1890FF"即可；如果要在change时同步状态，则按上述方式把 val.detail.value 赋给组件状态。

总结：Vue中@change的写法会直接影响处理函数收到的参数。只写方法名或显式传$event，可以获取组件事件对象并读取 detail.value；写成空括号调用，则只会执行函数逻辑，形参为 undefined；若还要追加业务参数，则需要显式传入 $event 和自定义参数。