vue或react中组件事件函数想传额外参数要怎么写

实际项目中，有的时候编写一个组件上的事件方法，不论是自己项目中的组件，还是用的element UI或者antd，可能会想要多传一个或几个参数到方法函数中使用处理，这时应该怎么写呢？

Vue处理方式

一、只有一个参数 

vue项目中可以使用$event代替组件方法中原本的单个参数，再加上自己想要多传的参数即可。

例子：element UI的el-checkbox上有change事件，参数是当前选中的值，假设change事件绑定的是onChange方法

<el-checkbox v-model="value" @change="onChange">选择</el-checkbox>

 这个时候只有一个参数

const onChange = (val) => {
    console.log(val)
}

想要再传一个"选择"，可以这样写

<el-checkbox v-model="value" @change="onChange('选择', $event)">选择</el-checkbox>

 onChange('选择', $event)中，$event代表组件原本的change事件参数即选中值，'选择' 是另外传的需要的参数。

二、事件参数有多个

这个时候可以使用arguments代表多个参数，使用时可以加上...扩展符。

例如：el-upload组件，属性before-remove的参数为上传的文件和文件列表这两个，在方法函数用file和fileList形参接收

// template
<el-upload :before-remove="beforeRemove" :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

// methods
const beforeRemove = (file, fileList) => {
    // 代码...
}

 当想要多传一个值"upload"时，template里组件方法参数可以写成 ('upload', ...arguments)，或 ('upload', file, fileList)；函数接收可以写成 (eventName, ...args)，或 (eventName, file, fileList)，args长度等于原本方法或属性的参数个数。

// template
<el-upload :before-remove="beforeRemove('upload', ...arguments)" :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

// methods
const beforeRemove = (eventName, ...args) => {
    // args即长度为2的数组，代表原本两个参数文件和文件列表
    // 代码...
}

React和Vue共同处理方式

组件上事件绑定的函数写成箭头函数传递原本参数，例如：

// react里，例子组件为antd的DatePicker
<DatePicker onChange={(date, dateString) => onDateChange('额外参数', date, dateString)} />

const onDateChange = (str, date, dateString) => {
    // 具体代码...
}

// vue例子，组件为element UI的el-input-number，template内
<el-input-number @change="(currentValue, oldValue) => handleChange(111, currentValue, oldValue)" />

// script
const handleChange = (num, ...args) => {
    // args长度为2，分别为currentValue, oldValue
    // 具体代码...
}