【vue2事件传参1】自定义参数：在elementui的change事件中，自定义参数的传递方法

阳光穿透心脏的1/2处 2024-03-24 13:18 26阅读 0赞

## 一、问题： ##

在elementUI的开发过程中，有时候会经常遇到，在已定义好的change事件中，想要传递一些自定义的数据，应该怎么解决？

## 二、解决方案： ##

#### **1、select标签的change事件** ####

**正常情况**：默认返回的是目前选中的值。

**特殊情况**：要传递自定义参数index呢？就需要用到$event，来获取默认的值，然后再其后面来实现对自定义参数的传递。

注：【该$event是指当前触发的是什么事件（鼠标事件，键盘事件等）】

**2、InputNumber计数器中的change事件**

正常情况：默认返回的是newValue，oldValue

特殊情况：要传递自定义参数index呢？需要用到箭头函数来变通，实现自定义参数的传递。

## 三、具体案例： ##

**案例1、select标签的change事件**

**【准备数据】**

在data中定义select标签选项中的数据为options数组。数据格式如下：

data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: ''
          }

**【正常情况】**

在<template>模板中使用select标签来显示下拉选项，绑定change事件为selectedItem。代码如下：

<el-select v-model="value" placeholder="请选择" @change="selectedItem">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
    </el-select>

在methods方法中，定义selectedItem方法，来实现与标签change事件的响应。代码如下：

selectedItem(e){
          console.log("你选择了：",e)
        },

页面效果为：

![2a9642c7ee5b4d9087369b8f49c15743.png][]

当然，你也可以直接传递对象形式的。代码的具体变化如下：

![db037577e97540909394ffa19e87f955.png][]

**【特殊情况】**

传递自定义的参数。以上面数据为例，如果想同时传递一个自定义index值，该如何去做呢？

1.更改标签事件中的绑定事件的写法：

![3d7bc8e5e5a341278934c89602b1c056.png][]

2.更改绑定事件中参数传递的数量：

![a4a9e4f4da964e299dcb97079b29650e.png][]

输出结果为：

![34e49be9040c424db496b891d55b8f21.png][]

**<>案例****2、InputNumber计数器中的change事件**

**【正常情况】**

![34bfd6dea0484faab80cf400d8c29838.png][]

页面效果：

![9f42fccbbf0840b0a28ef885f8639110.png][]

**【特殊情况】**

![b7be148e91f14b5abfc29b3162a9b911.png][]

页面效果：

![ed41930211034ef3b8d1b61275a3421a.png][]

[2a9642c7ee5b4d9087369b8f49c15743.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/cf0d627dd8f34e0dbcfbc82efe53924c.png
[db037577e97540909394ffa19e87f955.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/849ea286874c40e690000244b315ca9e.png
[3d7bc8e5e5a341278934c89602b1c056.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3a09047f59d34cef87dbf30c6a4633d6.png
[a4a9e4f4da964e299dcb97079b29650e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a0aa66d8f88e4b04a4bb288fbb9685d2.png
[34e49be9040c424db496b891d55b8f21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8a5901c378e3441f919ea824e64b1d15.png
[34bfd6dea0484faab80cf400d8c29838.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0dca706985134385ba887a186be01458.png
[9f42fccbbf0840b0a28ef885f8639110.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2b7c44bfbf584a7fb8563d511176f849.png
[b7be148e91f14b5abfc29b3162a9b911.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/566c593b8e6f4496bad4bb41b9f7e73c.png
[ed41930211034ef3b8d1b61275a3421a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5cb91b67bf82421ba22d3bd02e678b0e.png