精华内容
下载资源
问答
  • 下面小编就为大家带来一篇vue父组件中获取组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • < ...3、子组件向父组件传值需 是父组件 用到了 ,如果多个父组件引用了该子组件,则只有传值时候用组件来自哪个父组件,这个父组件才可以接收到值,其他父组件获取不到子组件值。  
    <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、子组件向父组件传值需 是父组件 用到了 ,如果多个父组件引用了该子组件,则只有传值的时候用的子组件来自哪个父组件,这个父组件才可以接收到值,其他父组件获取不到子组件传的值。

     

    展开全文
  • 父组件获取组件中的数据与方法 1.调用子组件的时候,通过设置ref <Child ref="child"></Child> 2.在父组件中通过 this.$refs.child.属性 //this.$refs 获取子组件中的内容 this.$refs.child.方法 父...

    父组件获取子组件中的数据与方法

    1.调用子组件的时候,通过设置ref

    <Child ref="child"></Child>
    

    2.在父组件中通过

    this.$refs.child.属性      //this.$refs 获取子组件中的内容
    this.$refs.child.方法
    

    父组件

    <template>
        <div id="father">
            <Child ref="child"></Child>
            <button @clik="child()">获取子组件的数据与方法</button>
        </div>
    </template>
    
    <script>
        import Child from "./Child";
        export default {
            data(){
                return{
                    title:'我是父组件中的数据'
                }
            },
            //组件声明
            components:{
                Child
            },
            methods:{
                child(){
                    alert(this.$refs.child.name)  //this.$refs 获取子组件的内容
                },
                father(){
                    alert("我是父组件中的parent方法")
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    

    子组件获取父组件中的数据与方法

    子组件通过

    this.$parent.属性
    this.$parent.方法
    

    子组件

    <template>
        <div id="child">
            <button @click="father()">获取父组件中的数据与方法</button>
        </div>
    </template>
    
    <script>
        export default {
           data(){
               return{
                   name:"我是子组件中的数据"
               }
           },
            methods:{
               father(){
                   alert(this.$parent.title) // this.$parent 获取父组件
                   this.$parent.father()  //获取父组件的方法
               }
            },
            props:['title','father']  //通过props接收父组件传递过来的数据
        }
    </script>
    
    <style scoped>
    
    </style>
    

    参考链接:添加链接描述

    展开全文
  • 在使用VUE开发时候,有时候,我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件发生,从而导致代码冗余,所以,我们可以把同一个模块下所有子组件请求事件都放到父组件中去处理。...
    39acd609abbe4e3a8ef958737902b17b

    在使用VUE开发的时候,有时候,我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生,从而导致代码冗余,所以,我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理。

    1、父组件通过属性的方式给子组件传值

    //注意:":city"和":swiperList"这里定义的什么名字,子组件中props接收的就是什么名字

    // "city"和"swiper"是你data中定义的名字

    //js中

    //data中定义好参数名,methods中获取数据并赋值给data中的参数

    data(){

    return{

    city:'',

    swiper:[]

    }

    },

    methods:{

    getHomeInfo (){

    axios.get('/api/index.json')

    .then(this.getHomeInfoSuccess)

    },

    getHomeInfoSuccess(res){

    //这里面的数据获取结构取决于你自己的接口返回来的结构

    res = res.data

    if(res.ret && res.data){

    const data = res.data

    this.city = data.city

    this.swiper = data.swiperList

    }

    }

    },

    2、子组件使用props接收父组件传递的属性

    子组件props中接收的属性参数只需要给其定义好数据类型,然后直接在模板中使用即可!

    Header子组件中:

    //template中

    {{ this.city }}

    //js中

    props:{

    city:String

    }

    Swiper子组件中:

    //template中

    //js中

    props:{

    swiperList: Array

    }

    展开全文
  • 但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错:怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才渲染,...

    但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错:

    怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才渲染,这样就不会抛出错误了。

    但是这还不够完美,子组件一般不直接使用父组件传来的值,二是监听一下,然后有变化了的时候再赋值给data,渲染的时候用data里的数据,这样就能保证随时动态更新数据

    props: ['floorGoods'],

    data() {

    return{

    flGoods: {}

    }

    },

    watch: {

    floorGoods(val) {

    this.flGoods = val;

    console.log(val);

    }

    }

    在一个方法就是在父组件里用Promise方法异步执行数据的赋值:

    new Promise((resolve,reject) => {

    if (res.status === 200){

    resolve(res);

    }

    }).then((res) => {

    this.category = res.data.data.category;

    this.adBar = res.data.data.advertesPicture.PICTURE_ADDRESS;

    this.bannerSwipePics = res.data.data.slides;

    this.recommendGoods = res.data.data.recommend;

    // 也可异步获取再传给子组件 Promise

    this.floorSeafood = res.data.data.floor1;

    this.floorBeverage = res.data.data.floor2;

    this.floorFruits = res.data.data.floor3;

    console.log(this.floorFruits);

    this._initScroll();

    })

    }).catch(err => {

    console.log(err);

    });

    这样也是可以的,异步获取数据导致的报错的情况会在各个场景出现,比如根据数据渲染dom,而对dom有js操作的时候,会因为还没渲染出来而找不到响应的dom元素报错,这里可以用vue提供的$nextTick()函数,或者手动开个setTimeout定时器,延迟获取;使用better-scroll的时候因为dom没有渲染出来而无法获取滚动元素的高度,导致无法滚动,同样可以用vue提供的这个函数,等dom渲染完了后再初始化滚动。

    总结

    以上所述是小编给大家介绍的vue父组件异步获取数据传给子组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • Vue组件获取组件数据

    万次阅读 2019-04-29 18:54:55
    1、子组件addindex.vue写一个方法,返回要用的数据 methods: { // 父组件获取数据 getVal () { return this.procedure } } 2、在父组aindex.vue中获取值 <ProcedureEdit ref="procedureEdit"><.....
  • 但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才渲染,...
  • 组件如何向子组件传递数据。一起学习,更多文章请关注我头条号,我是落笔承冰。一、先创建一张空白网页index.html,在head标签里设置好vue的链接库。二、写一个绑定元素div,一个子组件,一个父组件,父组件与...
  • vue 子组件获取父组件数据失败 获取父组件通过接口获取数据,然后传递给子组件, 子组件mounted打印时为空,但是父组件打印该数据不为空 ...在父组件注册组件中判断当前获取数据的长度,v-if='data.length&...
  • vue组件获取组件数据组件;在已引入组件标签 <child @cityCode="cityCode" ref="childSheng"></child> 获取组件的事件,在父组件方法 this.$refs.childSheng.getTileUrl(); 获取子...
  • VUE 自定义组件怎么获取到实例中的数据,详细点。。。。。。。。。。。。。。。
  • 刚开始使用this.$emit事件,但是子组件没办法触发事件,所以使用这种方法无法获取组件的数据。 今天偶然发现,原来可以直接使用下边的方法获取,简单好用 这是我的子组件: 父组件: 使用: 效果: ...
  • vue组件props异步获取的数据

    千次阅读 2018-05-17 19:26:58
    我们直接使用即可,但是如果我们所需的数据在父组件中是使用异步获取时,尤其我们的组件需要等待数据进行下一步操作时,如果不采用特殊的办法就会产生不可预知的错误,这时我们可以在子组件中使用watch,检测数据的...
  • 1.父组件主动获取组件中的数据和方法 在父组件里面通过: this.$refs.childMethod.属性 this.$refs.childMethod.方法 在父组件中:(调用子组件的时候,定义一个ref) <child-list ref="childMet...
  • 在child.vue中,msg实在data中定义的变量,使用props:['msg']从父组件中获取msg的值父组件部分:在调用组件的时候,使用v-bind将msg的值绑定为parent.vue中定义的变量message,这样就能将parent.vue中的message的值...
  • 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mounted 的时候 axios 还没有返回数据,而且 mounted 只执行一次,这时 props 中接收的数据为空 解决办法: 在对应组件中判断数据的长度 &lt;login...
  • 近期做项目时需要父组件在created()钩子函数异步获取数据然后传给子组件,子组件在created()钩子函数中获取传过来props,并进行初始化,发现子组件在created()钩子函数中获取不到props。 问题原因 首先解释一下...
  • 这个问题遇到很多次,就是父组件中通过接口获取的数据,传给子组件,在子组件打印是空的 原因:接口获取数据需要时间,而在这个数据没有获取到之前,子组件已经渲染完成,自然就拿不到数据了 目前测试的有效的...
  • Vue中组件的数据传输

    2020-06-27 15:02:49
    获取组件数据 获取DOM数据 1、引用方式操作DOM(获取DOM数据) 在HTML标签使用ref标签来引用数据: //HTML部分 <p @click="handleClick" ref="click1">{{num1}}</p //Vue组件部分 handleClick:function...
  • 1.父组件主动获取子组件的数据和方法 A.调用子组件的时候定义一个ref &lt;v-header ref="header"...B.在父组件里面通过以下方式获取子组件的数据和方法 ...在子组件中通过以下方式获取父组...
  • 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可例如:父组件中数据统计统计:销售数量 {{number}}销售金额 {{amount}}利润统计 {{profits}}data(){return{number:null,amount:null...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,746
精华内容 698
关键字:

vue获取组件中的数据

vue 订阅