事件传参各种问题

第三方或者抽离的组件的标签中存在其他预传参数时，需要传递其他自定义参数会出现覆盖参数的问题，如何传递其他参数？

一个参数

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

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

<template>
    <el-checkbox v-model="value" @change="onChange">选择</el-checkbox>
</template>
<script>
export default {
  methods: {
    onChange(val) {
        console.log(val)
    }
  }
}
</script>
<style></style>

<template>
    <el-checkbox v-model="value" @change="onChange('选择', $event)">选择</el-checkbox>
</template>
<script>
export default {
    methods: {
        onChange(val, event) {
            console.log(val, event)
        }
    }
}
</script>
<style></style>

多个参数

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

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

<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>
</template>
<script>
export default {
  methods: {
    beforeRemove(file, fileList) {
        console.log(file, fileList)
    }
  }
}
</script>
<style></style>

<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>
</template>
<script>
export default {
  methods: {
    beforeRemove(eventName, ...args) {
        console.log(eventName, args)
    }
  }
}
</script>
<style></style>