如何向钩子函数（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）