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

&nbsp;<template v-for="(item,i) in 4">&nbsp; &nbsp; &nbsp; <div :key="i" style="display:inline-block;margin-right:20px;">&nbsp; &nbsp; &nbsp; &nbsp; <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess.bind(this,i)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img v-if="imageUrl" :src="imageUrl" class="avatar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i v-else class="el-icon-plus avatar-uploader-icon"></i>&nbsp; &nbsp; &nbsp; &nbsp; </el-upload>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </template>&nbsp; &nbsp; <script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; uploadUrl: '/api/upload',&nbsp; &nbsp; &nbsp; imageUrl: ''&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; handleAvatarSuccess(idx,res,file,fileList){&nbsp; &nbsp; &nbsp; console.log(idx)&nbsp; &nbsp; }&nbsp; }}</script>通过es5的Bind，绑定到函数上，就可以实现钩子函数的传参了

Answer 2

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