vue 父组件调用子组件的函数_vue子组件触发父组件方法

全栈程序员站长

发布于 2022-11-10 14:23:52

2.9K0

发布于 2022-11-10 14:23:52

大家好，又见面了，我是你们的朋友全栈君。

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是有现实的使用场景的

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月28日，如有侵权请联系 cloudcommunity@tencent.com 删除