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

实际的开发需求是这样的,页面会动态生成若干个子组件,每个组件都有上传图片并实时预览图片的功能(这里我用的是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>

回答:

    <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,绑定到函数上,就可以实现钩子函数的传参了

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注