大家都知道父组件给子组件传值，子组件给父组件传值，两者通信并不难，官网上也有给案例，但是如果子组件想拿到父组件的异步数据，常规的写法是不行的，下面我记录我常用的两者写法；

方法1：

子组件用v-if，当父组件有数据才渲染；

data里面定义好要传入的对象，默认值可以是空字符串也可以是空对象；

子组件props接收父组件传来的参数，然后就可以用this.echartsData获取父组件的值并且使用了

方法2：

子组件用wach，并且加上deep属性，可以直接在handler里面传入在子组件定义好的方法；

最后总结一下，为啥在子组件的mounted里面拿不到父组件传过来的异步数据，因为父子组件的加载顺序是这样的，如下图

其实很好理解这是我朋友给我的形象的解释

所以说子组件比父组件先mounted，这也就是为啥在子组件的mounted钩子函数里面拿不到父组件传过来的异步数据；

最后，谢谢我的friends wu and teacher yang，以上纯属个人拙见，还望广大网友包涵，如有意见欢迎评论，指出，谢谢

vue父组件异步数据子组件接收遇到的坑的更多相关文章

  1. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  2. vue父组件如何向子组件中传递数据？

    原文地址 props传参 父组件: <template> <parent> <child :list="list"></child> ...

  3. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  4. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

  5. vue组件通信之父组件主动获取子组件数据和方法

    ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...

  6. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  7. vue 父组件给子组件传值，子组件给父组件传值

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...

  8. vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  9. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

随机推荐

  1. __I、 __O 、__IO是什么意思？怎么用？

    出处:http://www.chuxue123.com/forum.php?mod=viewthread&tid=122&ctid=3 __I. __O .__IO是什么意思?这是ST ...

  2. 思维导图初体验——openstack

    RABBITMQ memcache keystone glance nova neutron horizon cinder ceph

  3. 【ABAP系列】SAP ABAP常用函数总结第一篇

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP常用函数总结第一 ...

  4. HDU 6583 Typewriter 题解

    ——本题来自杭电多校第一场 题意:给定一个字符串,主角需要用打字机将字符串打出来,每次可以: 1.花费p来打出任意一个字符 2.花费q来将已经打出的某一段(子串)复制到后面去 对于这种最优化的问题,我 ...

  5. Fira Code，可以让不等号!=直接显示出来的字体

    今天看B站某直播间有人写代码C#里一堆不等号直接显示,感觉很神奇,以为是插件还是什么新语法,托人问了下原来是Fira Code字体 https://github.com/tonsky/FiraCode ...

  6. .net 项目中cookie丢失解决办法

    创建cookie的时候 HttpCookie PdaCookie = new HttpCookie("Pda");PdaCookie ["PdaId"] = 1 ...

  7. Scala面向对象

    面向对象编程OOP: Scala vs Java 都有这三特性 封装:把属性.方法封装到类中 Person: int id, String name, Date birthday.... 需要gett ...

  8. 2019牛客暑期多校训练营（第二场） - F - Partition problem - 枚举

    https://ac.nowcoder.com/acm/contest/882/F 潘哥的代码才卡过去了,自己写的都卡不过去,估计跟评测机有关. #include<bits/stdc++.h&g ...

  9. UVALive 6270 Edge Case（找规律，大数相加）

    版权声明:本文为博主原创文章,未经博主同意不得转载. vasttian https://blog.csdn.net/u012860063/article/details/36905379 转载请注明出 ...

  10. activity 生命周期 http://stackoverflow.com/questions/8515936/android-activity-life-cycle-what-are-all-these-methods-for

    331down voteaccepted See it in Activity Lifecycle (at Android Developers). onCreate(): Called when t ...