专栏首页前端小叙vue父组件中获取子组件中的数据

vue父组件中获取子组件中的数据

<FormItem label="上传头像" prop="image">
                    <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
</FormItem>
 <FormItem label="上传营业执照" prop="businessLicence">
       <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
</FormItem>

自己写了个上传图片的子组件,父组件需要获取到子组件上传的图片地址,

方法一:给相应的子组件标签上加 ref = “avatar”

父组件在最后提交的时候获取this.$refs.avatar.相应数据 即可,因为在这里才能保证图片已经上传,否则如果图片没上传,拿到的值一定为空。

方法二:$emit()

/*
    子组件
*/
<template>
    <input type='file' @change="changeUrl" />
</template>
<script>
export default {
    methods: {
        changeUrl(e) {
            this.$emit('changeUrl', e.currentTarget.files[0].path)
        }
    }
}
</script>
/*
    父组件
*/
<template>
    <FormItem label="上传营业执照" prop="businessLicence">
        <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
    </FormItem>
</template>
<script>
export default {
    methods: {
        getUrl(path) {
            //这个就是你要的path,并且会双向绑定
        }
    }
}
</script>

2017.12.21更新

当使用this.$emit方法获取的时候,如果子组件想要给父组件传入多个值,则可以写多个参数,父组件在获取的时候获取多个参数的值即可

//父组件
getUrl(path1,path2) {
     console.log(path1,path2)
}

注意问题:

1、父组件相应事件写在该子组件上

2、子组件如果并没有click事件触发,也没有类似本例input需要change事件触发,则在created或者mounted函数中让该函数加载即可

3、子组件向父组件传值需 是父组件 用到了 ,如果多个父组件引用了该子组件,则只有传值的时候用的子组件来自哪个父组件,这个父组件才可以接收到值,其他父组件获取不到子组件传的值。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

    蓓蕾心晴
  • Vue slot简单理解

    情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child'...

    蓓蕾心晴
  • 小程序在父组件执行子组件方法,可适用于下拉刷新上拉加载之后执行子组件方法

    当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法...

    蓓蕾心晴
  • vue2.0组件间通信

    大象无痕
  • Vue 3 提供与注入

    通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。在这...

    公众号---人生代码
  • 干货 | 从0到1,搭建一个体系完善的前端React组件库

    随着前端工程的发展,组件化的思想早已深入人心;现代的前端框架React/Vue等,都是围绕组件设计;组件化的开发模式,大大提高了开发效率;设计和开发高质量高复用...

    携程技术
  • 42. Vue组件传值-子组件通过事件调用向父组件传值

    上一篇章讲解了使用props将父组件的值传递到子组件中,那么子组件如果反过来传递给父组件呢?

    Devops海洋的渔夫
  • kg-ui基于hippy-react组件库设计和工程化思考

    单一职责的组件的好处很明显,可以最大可能性地复用组件,但是这也带来一个问题 , 过度单一也可能会导致过度抽象,造成组件库的碎片化;比如在实现小红点,小红点基本上...

    melodyren
  • 【译】选择Bit.dev构建组件库的15个理由

    2019年的时候,UI组件库在普及度上有了巨大的飞跃。当然这并不多么令人惊奇,因为像Uber、Airbnb、Booking等等公司都在通过共享的UI组件来保证其...

    腾讯IVWEB团队
  • Vue 与 React 父子组件之间的家长里短

    FinGet

扫码关注云+社区

领取腾讯云代金券