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

一、问题：

       在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)
    },

       页面效果为：

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

        【特殊情况】

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

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

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

        输出结果为：

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

       【正常情况】

        页面效果：

       【特殊情况】

页面效果：