1、使用场景
项目里将element-ui的el-upload写成公共组件方便调用,官方的before-upload方法用于处理上传前要做的事,如:比较文件大小,限制文件类型等,通过返回true 或 false 控制是否上传。 当该组件调用父组件方法,并且要能获取到父组件方法的返回值,如何实现?
2、问题说明
通常子组件调用父组件方法:this.$emit(方法名, 传参1, 传参2),但是此方法的返回值是vue对象,而不是父组件方法的return值。此时要用到高阶函数,传函数作为参数,父组件里执行该函数。
// ===============方案1=====================
// 父组件
<template>
<uploader :imgUrl="editForm.guidepic" action="/uploadimg" @uploadSuccess="uploadSuccess" @beforeUpload="beforeAvatarUpload"></uploader>
</template>
<script>
export default {
methods: {
beforeAvatarUpload(file, callback) {
let size = file.size / 1024 // kb单位
let res = true
if (size > 10) {
this.$message.error('图片大小超过限制,最大1M')
res = false
callback(res) // 执行作为参数的函数,注意:callback(true)写法,eslint会报错,true或 false 要赋值给变量res
}
}
}
}
</script>
// 子组件
export default {
methods: {
onBeforeUpload(file) {
let res = true
this.$emit('beforeUpload', file, val => { res = val }) // 传函数val => { res = val }给父组件
return res
}
}
}
另一种实现方法:通过传Function,子组件可获取到父组件的方法。
// ============方案2=================
// 父组件
<template>
<uploader :imgUrl="editForm.guidepic" action="/uploadimg" @uploadSuccess="uploadSuccess" :beforeUpload="beforeAvatarUpload"></uploader>
</template>
<script>
export default {
methods: {
beforeAvatarUpload(file) {
let size = file.size / 1024 // kb单位
if (size > 1024) {
this.$message.error('图片大小超过限制,最大1M')
return false
}
}
}
}
</script>
// 子组件
export default {
props: {
// 子组件接收函数
beforeUpload: {
type: Function
}
},
methods: {
onBeforeUpload(file) {
// 父组件不传,this.beforeUpload默认值undefined
if (this.beforeUpload) {
return this.beforeUpload(file)
}
}
}
}
这2这种方案都可以实现,可见props的type为Function是有现实的使用场景的