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

方法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. day11—前端学习之我不想看书

    转行学开发,代码100天——2018-03-27 今天是前端学习,博客记录见证的第11天,按理说还要继续写一写代码相关的内容. 但由于今天的代码实践都是一些基础知识,还是想谈一谈关于编程方面看书的事情 ...

  2. vue全局自定义指令-元素拖拽

    小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function ( ...

  3. 基于K-means Clustering聚类算法对电商商户进行级别划分(含Octave仿真)

    在从事电商做频道运营时,每到关键时间节点,大促前,季度末等等,我们要做的一件事情就是品牌池打分,更新所有店铺的等级.例如,所以的商户分入SKA,KA,普通店铺,新店铺这4个级别,对于不同级别的商户,会 ...

  4. input限制小数点的位数

    在做限制input小数点的时候,我本来想通过vue里面的的watch监听来实现, ---实现逻辑是,通过监听输入的内容,当出现"."(点)的时候,记录通过indexOf获取点的位置 ...

  5. from、includes、indexOf

    from.includes.indexOf:https://blog.csdn.net/j59580/article/details/53897630?utm_source=blogxgwz1 语法 ...

  6. 二叉树BinTree类定义

    #include<iostream> using namespace std; template<class T> struct BinTreeNode{//二叉树结点类 T ...

  7. python学习第七天流程控制循环while和循环for区别

    流程控制循环是任何编程语言都有一种循环结构,在python while 和break continue 搭配使用,还一种while ....else ......,for循环有序列表和字符串 whil ...

  8. POJ 1438 One-way Traffic (混合图+边双连通)

    <题目链接> 题目大意: 给定一个混合图,问你在能够使得图中所有点能够两两到达的情况下,尽可能多的将无向边变成有向边,输出这些无向边的变化方案. 解题分析:这与之前做过的这道题非常类似 P ...

  9. Go语言_包、变量和函数

    包.变量和函数 学习 Go 程序的基本结构. Go 作者组编写,Go-zh 小组翻译. https://go-zh.org 包 每个 Go 程序都是由包构成的. 程序从 main 包开始运行. 本程序 ...

  10. 转载一篇别人分享的VSFTPD.CONF的中文解释方便以后查询

    # 服务器以standalong模式运行,这样可以进行下面的控制 listen=YES # 接受匿名用户 anonymous_enable=YES # 匿名用户login时不询问口令 no_anon_ ...