【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事件

        【正常情况】

         页面效果：

        【特殊情况】

 页面效果：