如何向钩子函数（elment 的上传组件的事件）传递参数

Question

实际的开发需求是这样的，页面会动态生成若干个子组件，每个组件都有上传图片并实时预览图片的功能（这里我用的是element-ui的Upload组件），遇到的问题是不知道如何把索引值传递给哪个函数，以实现不同子组件预览对应其上传的图片的功能

<template>
  <div>
    <template v-for="(item,i) in 4">
      <div :key="i" style="display:inline-block;margin-right:20px;">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </template>
  </div>
</template>

Answer 1

    <template v-for="(item,i) in 4">
      <div :key="i" style="display:inline-block;margin-right:20px;">
        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess.bind(this,i)">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </template>
    <script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload',
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(idx,res,file,fileList){
      console.log(idx)
    }
  }
}
</script>

通过es5的Bind，绑定到函数上，就可以实现钩子函数的传参了

Answer 2

可以用item中的唯一标示来传给这个子组件如（id）

Answer 3

怎么想都没想到的办法，解决的我眼泪都掉下来，谢谢楼主