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

方法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. keras：InternalError: Failed to create session

    如题,keras出现以上错误,解决办法: 找到占用gpu的进程: nvidia-smi -q 杀死这些进程即可: xxxxx

  2. leetcode 238. 除自身以外数组的乘积 (python)

    给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输入: [1 ...

  3. CentOS7配置Tomcat8开机自动启动

    1.创建文件 # vi /etc/systemd/system/tomcat.service [Unit] Description=Tomcat8540 After=syslog.target net ...

  4. 第 3 章 前端基础之JavaScript

    一.JavaScript概述 1.javascripts的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptE ...

  5. Logistic Regression Algorithm解决分类问题

    在线性回归算法中,我们看到,在training set中,输入矩阵X与向量y的值都是连续的.所以在二维空间中,我们可以用一条直线去模拟X与y的变化关系,寻找参数向量theta的取值.如根据房屋面积预测 ...

  6. jmeter设置全局变量token

    返回登录后的token使用json path Extractor插件,定位到获取后的token为变量 在登录下后置处理器下添加json path Extracto插件 根据上面获取到的token位置路 ...

  7. 如何配置JedisPool的参数

    转自:http://blog.csdn.net/huahuagongzi99999/article/details/13631579 如何配置Pool的参数 JedisPool的配置参数很大程度上依赖 ...

  8. [Linux] 009 链接命令

    链接命令:ln 命令名称:ln 命令英文原意:link 命令所在路径:/bin/ln 执行权限:所有用户 语法:ln -s [原文件] [目标文件] 功能描述:生成链接文件 范例: 创建文件 /etc ...

  9. SpringBoot实现上传下载(二)

    这篇写下载. **1.实现思路** 上一篇的数据库设计中,我们有一个字段始终没有用到fileName,这是用来给Layer对象存储文件名的,以此来完成文件与对象的对应, ![image.png](ht ...

  10. [LeetCode] Linked List Cycle II, Solution

    Question : Given a linked list, return the node where the cycle begins. If there is no cycle, return ...