vue中使用@change

最新推荐文章于 2025-03-31 15:41:36 发布

reembarkation

最新推荐文章于 2025-03-31 15:41:36 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/reembarkation/article/details/125808423

js 同时被 2 个专栏收录

53 篇文章

订阅专栏

vue

48 篇文章

订阅专栏

本文介绍了在Vue中如何通过@change事件捕获组件状态变化，并传递自定义参数。示例包括a-checkbox和a-select组件的事件监听，展示了如何获取当前选中值以及自定义参数的传递方式，帮助开发者更好地理解和运用Vue的事件系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多组件有@change事件，那到底如何获取到当前的参数呢？

1.自定义参数：

比如一个a-checkbox的change事件：

<a-checkbox :checked="source.check" @change="onCheckAllChange($event,source)">
       {{source.name}}
 </a-checkbox>

 onCheckAllChange(e,source) { 
       let checked =e.target.checked // true 或者 false 
       
 },

这样你可以清楚checkbox的当前值，也能传递过去自己要传递的其他参数

2.简单使用，不需要参数

比如一个select添加change事件不传递参数：

<a-select v-model="selType" @change="dbTypeChange">
                <a-select-option  v-for="item in dbTypes" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
</a-select>

// 方法定义，加入e
 dbTypeChange(e){
    console.log('e',e) // e 就是当前选择项的value
  },