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

方法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. Windows命令学习

    总: 1.window dos命令不区分大小写  2.指令参数 /a   -a 等价 更倾向于 / 3.命令有疑问: CMD输入help 或者单条命令 /? help time /? 用到的实用命令总 ...

  2. Windows 下开启FTP服务并创建FTP用户

    Windows 下开启FTP服务,并创建用户 此教程教你怎么开启 Windows 的 FTP 服务,并创建用于登入 FTP 的用户.教程用到的操作系统是 Windows 7. 一.创建用于登入 FTP ...

  3. 今天刚到货的小米平板2,就出现dnx fastboot mode一直卡死黑屏

    http://bbs.xiaomi.cn/t-11786254 今天刚到货的小米平板2,就出现dnx fastboot mode一直卡死黑屏, 发表在晒机评测2015-11-30 14:22:57 来 ...

  4. 【自动化测试】WebDriver使用

    from selenium import webdriver from selenium.webdriver.common.keys import Keys from bs4 import Beaut ...

  5. mysqldump - 备份 MySQL 数据库

    参考资料 备份 备份所有数据库中的所有数据(包括系统数据库) –all-databases 通过 --all-databases 选项备份所有的数据库: mysqldump -uroot -p --a ...

  6. hbase报Dead Region Servers

    问题描述: 16010端口启动成功,16020未启动. hbase-root-regionserver-hbase2.log日志: 2019-08-14 16:45:10,552 WARN [Thre ...

  7. Git007--删除文件

    Git--删除文件 本文来自于:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/ ...

  8. python-MySQL数据库--- 基础篇

    MySQL数据库基础 数据库系统(database system) 1.数据库系统(database system)         数据库系统是计算机系统中一种专门管理数组资源的系统,数据库存储的是 ...

  9. Problems occurred when invoking code from plug-in: "org.eclipse.jface".

    java.lang.NullPointerException at com.genuitec.eclipse.easie.core.AppServer.getServerLabel(Unknown S ...

  10. C# 生成word文档(NPOI.XWPF)

    一.基础 1.创建Word using NPOI.XWPF.UserModel XWPFDocument doc = new XWPFDocument(); //创建新的word文档 XWPFPara ...