【Vue】如何给自带默认回调参数的函数添加自定义参数：$event

最新推荐文章于 2023-09-13 13:29:29 发布

转载最新推荐文章于 2023-09-13 13:29:29 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/AAABingBingBing/p/14755828.html

文章标签：

#vue.js #javascript #前端

在Vue.js中，当使用el-upload组件时，原生的handleAvatarSuccess回调函数只接收一个参数。为了传递额外参数，可以利用事件对象$event或使用扩展运算符‘…’来接收多个参数。例如，可以通过$event捕获上传事件的详细信息，并通过额外的形参传递自定义数据。

原来的代码是这样的：handleAvatarSuccess 会回调两个参数，这个时候如果直接在里面添加形参接不到

<el-upload :on-success="handleAvatarSuccess">
</el-upload>

handleAvatarSuccess(res) { // 自带的回调参数res跟file
	console.log('res', res)
}

修改后：

<el-upload :on-success="($event) =>{handleAvatarSuccess($event,1)}">
</el-upload>

handleAvatarSuccess($event, flag){ //通过flag接收传过来的1
	console.log('res', $event)
},

如果有多个回调参数，则用"…"接收

<el-upload :on-success="(...event) =>{handleAvatarSuccess(event, 1)}">
</el-upload>

handleAvatarSuccess(param, flag){ //通过flag接收传过来的1
  let res = param[0]
  let file = param[1]
	console.log('res', res)
},