vue 中给element-ui组件事件添加自定义参数

原因:

　　有时同一个页面会多次使用组件, 为了区分从组件中拿到的数据,一般会给事件中添加参数用于区分

 

试例:

　　下面看两个上传文件均用到 el-upload 组件, 在on-success事件中拿到数据后需要区分上传的是哪个文件

 

 错误的解决方案: 

 :on-success="handleAvatarSuccess(1)"
  //文件上传
  handleAvatarSuccess(d:number,res: any, file: any,) {
    console.log(d); // 1
    console.log(res); // undefined
    console.log(file); // undefined
  }

会发现拿不到 res, file数据, 只能拿到自定义的参数

 

正确的解决方案:

:on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList,1)"
  //文件上传
  handleAvatarSuccess(res: any, file: any, fileList: any, d: number,) {  
    console.log(res); // {...}
    console.log(file); // {...}
    console.log(d); // 1
  }

 

分享一刻:

苹果营销页中几个有趣的交互动画