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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
CSS常用网站布局实例
Apr 03 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP自动重命名文件实现方法
2014/11/04 PHP
详解YII关联查询
2016/01/10 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
详解Node 定时器
2018/02/26 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python实现聊天小程序
2018/03/13 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
公司营业员的自我评价
2014/03/04 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年市场部工作总结
2014/11/25 职场文书
小石潭记导游词
2015/02/03 职场文书
公司出纳岗位职责
2015/03/31 职场文书
体育部部长竞选稿
2015/11/21 职场文书
导游词幽默开场白
2019/06/26 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书