做项目时候遇到一件怪事：
父组件向子组件<dialog-info/>传个参数arrdata，是个数组

因为是Array类型的参数，子组件中进行了接收，并且default通过函数返回一个空数组

然后子组件中例行公事验证下是否正常拿到值

惊呆了，竟然是空的数组！

可是vue调试工具中props正常拿到了啊

有点意思，后来根据项目结构想了一下，发现问题出在哪里了

项目是这样的：

这就是父组件所在的页面，点击蓝色按钮新增，会触发回调方法，显示<DialogInfo>子组件
而父组件向子组件传递过来的值arrdata，是在这里通过监听异步获取的

然后渲染在这个列表里：

这里就涉及到组件加载顺序的问题，为什么刚才我在子组件那里获取不到数据呢？因为子组件<DialogInfo>组件加载完毕的时候父组件那里都还没有获取到异步返回的值。

所以为了能获取到值，我们可以在父组件那里判断一下，只有获取到了值，也就是父组件向子组件传递的数组的值的length不为0才渲染：

这样就能保证子组件一定是等父组件准备好数据了，然后再加载，结果：

还有一个解决方法！

就是通过elementui的<el-dialog>组件内置的方法opened或者open执行回调函数，这两个函数会在<el-dialog>组件打开以后执行

我的子组件<dialog-info>就是一个封装的<el-dialog>组件，所以只要等到dialog打开完成了，在回调函数里面就一定可以拿到父组件传过来的值！

子组件中绑定opened方法：

定义回调方法并且返回：

这样我们点击按钮时候，dialog会弹出来

并且在回调方法中我们可以取到值，因为此时早就获得到数据了：

vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法相关推荐

vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 .这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 ...
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发,微信授权和微信分享基本是必备功能,昨天将微信分享的相关功能和踩坑过程做了一个总结,今天就来说下微信授权的功能具体到 vue 项目中该要怎么做. Vue 爬坑之旅 – history ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数 <el-table-columnlabel="附件"align="center& ...
Vue 子组件修改父组件值的解决方法
分析 vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控: 此外,每次父组件的数据发生更新时,子组件的 ...

vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法

还有一个解决方法！

vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法相关推荐

最新文章

热门文章

vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法

还有一个解决方法！

vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法相关推荐

最新文章

热门文章

vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法

vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法相关推荐