Vue 父组件ajax异步更新数据,并传递给子组件的方法
本文问题解决参考https://segmentfault.com/q/1010000010167688 问题:如何把父组件动态传递ajax数据,并更新子组件的内容注意:在父组件中获取ajax数据,由于是异步获取,所以子组件mounted阶段,ajax仍未完成请求,所以使用:bind方法传递到子组件的数据获取为undefined 方法:子组件中,使用w...
·
本文问题解决参考https://segmentfault.com/q/1010000010167688
问题:
如何把父组件动态传递ajax数据,并更新子组件的内容
注意:
在父组件中获取ajax数据,由于是异步获取,所以子组件mounted阶段,ajax仍未完成请求,所以使用:bind方法传递到子组件的数据获取为undefined
方法:
子组件中,使用watch,监听传参的变化,当监听到数据时,更新调用方法更新数据
例子:
父组件
通过ajax获取到数据并存入datajson对象中,通过bind的方法传递参数给子组件
<router-view :datajson="datajson"></router-view>
子组件
通过props接受参数后,监听参数的变化,
watch选项
使用immidate选项 ,使监听开始时立即调用函数,更新获取到父组件传递的参数,
props: { datajson: Object }, watch: { datajson: { handler () { // 监听获取ajax数据 this.getHomeInfo() }, // 监听到数据变化时立即调用 immediate: true } }, methods: { getHomeInfo () { this.goods = this.datajson.goods console.log(this.datajson) } }
本文为个人学习笔记,如有错误,请多多指点,谢谢!!
更多推荐
已为社区贡献5条内容
所有评论(0)