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

方法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. 软件-JMeter：JMeter 百科

    ylbtech-软件-JMeter:JMeter 百科 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到 ...

  2. Linux_自制系统服务启动脚本

    目录 目录 前言 Case语句 Apache 启动脚本 Postfix service 启停脚本 前言 在Linux的某些系统服务中,需要自己定制启动服务的脚本.通常会使用Cash语句来实现. Cas ...

  3. PHP 调试 - 方式

    之前学 Java 的时候,一直使用 IDE 的 console 控制台进行调试.后来搞 PHP 后,习惯在代码里面 echo 和 exit,然后在浏览器刷新看效果,把单步调试.变量值查看等常用的调试方 ...

  4. 状压DP : [USACO06NOV]玉米田

    玉米田 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 农场主John新买了一块长方形的新牧场,这块牧场被划分成M行N列(1 ≤ M ≤ ...

  5. sqlserver关于时间的一些语句

    /* 去掉时间的时分秒 */ CONVERT(CHAR(10),operate_time,120) /* 所有的天数增加一天 */ DATEADD(day,1,t.operate_time) /* 返 ...

  6. 如何将网络流转化为内存流 C#

    //将获取的文件流转化为内存流 public static MemoryStream ConvertStreamToMemoryStream(Stream stream) { MemoryStream ...

  7. RabbitMQ基于Stomp实现与MQTT客户端通信

    请参照RabbitMQ应用和SpringBoot集成RabbitMQ并实现消息确认机制 详情参照官方文档https://www.rabbitmq.com/stomp.html.https://gith ...

  8. idea 2019.1.3最新注册码

    CATF44LT7C-eyJsaWNlbnNlSWQiOiJDQVRGNDRMVDdDIiwibGljZW5zZWVOYW1lIjoiVmxhZGlzbGF2IEtvdmFsZW5rbyIsImFzc ...

  9. wxstring与其他类型转换

    wxstring与其他类型转换 1.1 int to wxString: wxString str = wxString::Format(wxT("%i"),myInt); 1.2 ...

  10. 灰常牛逼的命令行备忘录 navi

    灰常牛逼的命令行备忘录 navi 1. navi命令简介 1.1 navi命令简介 命令行是非常高效的工具,但一个很常见的现象是,很多命令行过一段时间就容易忘.举个栗子,如果我们常用 git 命令行管 ...