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

vue 父组件调用子组件的函数_vue子组件触发父组件方法1、使用场景项目里将element-ui的el-upload写成公共组件方便调用,官方的before-upload方法用于处理上传前要做的事,如:比较文件大小,限制文件类型等,通过返回true或false控制是否上传。当该组件调用父组件方法,并且要能获取到父组件方法的返回值,如何实现?2、问题说明通常子组件调用父组件方法:this.$emit(方法名,传参1,传参2),但是此方法…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188137.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux下查看Apache连接数

    Linux下查看Apache连接数

  • 十款很不错的磁盘碎片整理工具「建议收藏」

    十款很不错的磁盘碎片整理工具「建议收藏」
    说到磁盘整理工具,应该说说磁盘碎片的定义,为什么磁盘碎片会对系统性能造成影响。首先我不是专业的电脑人员,对很专业的理论知识不懂,在这里只可以用很通俗很日常的语言来表达。其实磁盘碎片应该称为文件碎片,是因为文件被分散保存到整个磁盘的不同地方,而不是连续地保存在磁盘连续的簇中形成的。为什么这些碎片多了,会对系统性能造成影响呢?打个比方,你的房间你很久没有整理和清洁了,原本有条不紊的东西变得乱七八糟,你找起东西来自然不方便,耗时间。系统读取硬盘数据也一样,硬盘数据琐碎散落,系统读取起来就

  • 2020Java高级开发工程师面试题汇总

    2020Java高级开发工程师面试题汇总2020面试总结工作三年多,面试目标为高级开发工程师前言9.5–11.13,经过了长达70天的面试,终于有了结果。期间崩溃过无数次,很多次面试都被虐到怀疑人生,也有三面被刷掉无奈,一次次整装重新出发,一次次从头再来。今天有时间整理最近面试过程中涉及到的问题和经验,希望可以帮助到正在面试中或即将面试的同行们。一、面试过的公司阿里巴巴京东美团百度度小满金融爱奇艺当当网58同城贝壳找房快手小米滴滴微博陌陌中信银行尚德机构轻松筹货拉拉一起教育易车好未来二、面

  • 汉诺塔递归太难理解了_函数定义时可以用递归吗

    汉诺塔递归太难理解了_函数定义时可以用递归吗记得我第一次做汉诺塔这道题时,是2017年11月。当时,我坐在山大青岛校区图书馆3楼,不知怎么地,看到了这个题。然后,就思考了一整天,233当然,悲剧就是,我当时花了一天的时间还是没有真正理解这道题递归的思路。如今,我终于懂了,嘿嘿嘿。关于递归:一定不要试图跟踪大型递归的过程!要写出递归,关键就是找出递归的递归方程式:也就是说,要完成最后一步,那么最后一步的前一步要做什…

    2022年10月25日
  • 史上最简单的Hibernate入门简单介绍

    史上最简单的Hibernate入门简单介绍

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号