vue父组件异步获取数据传给子组件的方法


Posted in Javascript onJuly 26, 2018

但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错:

vue父组件异步获取数据传给子组件的方法

怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才渲染,这样就不会抛出错误了。

vue父组件异步获取数据传给子组件的方法

但是这还不够完美,子组件一般不直接使用父组件传来的值,二是监听一下,然后有变化了的时候再赋值给data,渲染的时候用data里的数据,这样就能保证随时动态更新数据 

props: ['floorGoods'],
data() {
return{
flGoods: {}
}
},
watch: {
floorGoods(val) {
this.flGoods = val;
console.log(val);
}
}

在一个方法就是在父组件里用Promise方法异步执行数据的赋值:

new Promise((resolve,reject) => {
if (res.status === 200){
resolve(res);
}
}).then((res) => {
this.category = res.data.data.category;
this.adBar = res.data.data.advertesPicture.PICTURE_ADDRESS;
this.bannerSwipePics = res.data.data.slides;
this.recommendGoods = res.data.data.recommend;
// 也可异步获取再传给子组件 Promise
this.floorSeafood = res.data.data.floor1;
this.floorBeverage = res.data.data.floor2;
this.floorFruits = res.data.data.floor3;
console.log(this.floorFruits);
this._initScroll();
})
}).catch(err => {
console.log(err);
});

这样也是可以的,异步获取数据导致的报错的情况会在各个场景出现,比如根据数据渲染dom,而对dom有js操作的时候,会因为还没渲染出来而找不到响应的dom元素报错,这里可以用vue提供的$nextTick()函数,或者手动开个setTimeout定时器,延迟获取;使用better-scroll的时候因为dom没有渲染出来而无法获取滚动元素的高度,导致无法滚动,同样可以用vue提供的这个函数,等dom渲染完了后再初始化滚动。

总结

以上所述是小编给大家介绍的vue父组件异步获取数据传给子组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
实现高性能javascript的注意事项
May 27 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 #Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 #Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 #Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 #Javascript
详解ECMAScript typeof用法
Jul 25 #Javascript
You might like
如何使用PHP获取网络上文件
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
numpy.random模块用法总结
2019/05/27 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
EJB实例的生命周期
2016/10/28 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
煤矿班组长的职责
2013/12/25 职场文书
财产保全担保书
2015/01/20 职场文书