Vue你只了解$event吗？了解一下arguments

需求：父组件接收子组件传递的多个参数并且需要接收的方法传入自己定义的参数

下面以element-ui的上传组件为例

<el-upload
    class="image-upload"
    :on-progress="handleUploadProgress"
>
    
</el-upload>

正常是这么写的

{
    methods: {
        handleUploadProgress(event, file, filelist) {
            // ... 省略一万行代码
        }
    }
}

如果我要handleUploadProgress方法中添加自己定义的参数， 因为我需要把上面的el-upload组件封装成一个批量上传的组件，每一个el-upload只上传一张图片，记录每一张图片上传的进度时怎么写？

在vue中我们知道，$event可以接收子组件向上传递的一个参数，但是现在el-upload组件传递了3个参数，那么我们应该如何接收？下面这种写法？？？

<template v-for="item in items">
    <el-upload
        :key="item.id"
        :on-progress="handleUploadProgress(item, $event)"
        class="image-upload"
    >
    </el-upload>
</template>

上面👆代码是行不通

这就需要引入arguments了，在函数中获取调用函数传入的参数时我们一般都使用 arguments、或者...reset解构

故：上面换一个中写法

<template v-for="item in items">
    <el-upload
        :key="item.id"
        :on-progress="handleUploadProgress(item, arguments)"
        class="image-upload"
    >
    </el-upload>
</template>

  // 监听图片上传的进度
    handleUploadProgress(item, event, file, fileList) {
        console.log('item :', item);
        console.log('event :', event);
        console.log('file :', file);
        console.log('fileList :', fileList);
    }

但是，在调试的时候直接就运行handleUploadProgress方法？？

加一个.bind试一试

<template v-for="item in items">
    <el-upload
        :key="item.id"
        :on-progress="handleUploadProgress.bind(this, item, arguments)"
        class="image-upload"
    >
    </el-upload>
</template>

果然没有错误了，点击上传图片出现了自定义的数据

最后：

1. 如果子组件是接收的是一个函数那么需要.bind
2. 如果子组件通过$emit向上传递数据那么不需要.bind, 直接arguments就行了