Requirement: The parent component receives multiple parameters passed by the child component and needs the receiving method to pass in its own defined parameters

Take the upload component of Element-UI as an example

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

Normal is written like this

{
    methods: {
        handleUploadProgress(event, file, filelist) {
            / /... Leave out 10,000 lines of code}}}Copy the code

If I want to add my own parameters to the handleUploadProgress method, because I need to wrap the above el-upload component into a batch upload component, each el-upload only one image, how to record the progress of each image upload?

In Vue we know that $event can receive one parameter passed up by a child component, but now the el-Upload component has passed three parameters, so how do we receive them? The following way of writing??

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

The 👆 code above does not work

This brings arguments into play. We usually use arguments, or… Reset deconstruction

So: write it in Chinese

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

Copy the code
  // Monitor the upload progress of images
    handleUploadProgress(item, event, file, fileList) {
        console.log('item :', item);
        console.log('event :', event);
        console.log('file :', file);
        console.log('fileList :', fileList);
    }
Copy the code

Instead, run the handleUploadProgress method directly during debugging.

Add one. Bind, let’s try it

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

Sure enough, there was no error, click upload picture appeared custom data

Finally:

  1. This is required if the child component is receiving a function.bind
  2. Not if the child component passes data up through $emit.bindArguments can be used as arguments