【vue】组件传值异步问题--子组件拿到数据较慢
问题的出现:之前写静态页面的时候,直接父向子传值,是直接能渲染出父组件给子组件的值,但是加上请求之后,就出现了一个问题,就是在组件创建和渲染完毕时,子组件的值才拿到,子组件并没有实时的更新模版(简直就是灾难始终慢我一步!!!)产生的原因:子组件中的created、mounted只执行一次,在父组件初始化时,已经给子组件传了一个空值,导致异步请求数据发生变化时,子组件的值不再变化。解决办法:就是让他
·
问题的出现:
之前写静态页面的时候,直接父向子传值,是直接能渲染出父组件给子组件的值,但是加上请求之后,就出现了一个问题,就是在组件创建和渲染完毕时,子组件的值才拿到,子组件并没有实时的更新模版(简直就是灾难始终慢我一步!!!)
产生的原因:
子组件中的created、mounted只执行一次,在父组件初始化时,已经给子组件传了一个空值,导致异步请求数据发生变化时,子组件的值不再变化。
解决办法:
就是让他没有发请求拿到数据时,不让他去创建子组件给它传值,因此给其加一个v-if指令来限制他是否能创建子组件,类似于节流的思想。
接着上代码,来展示一下怎么解决
data数据里
flag: false
请求的方法里
// 得到学生数据
async getInfo () {
const { data: res } = await getTwoStudentApi(this.id1, this.id2)
console.log(res)
this.student1 = res.data[0]
this.student2 = res.data[1]
this.flag = true
// 搜索完毕清空搜索框
this.id1 = ''
this.id2 = ''
}
子组件处
<GraghDescription :student="student1" v-if="flag"></GraghDescription>
跟上一篇的报错有些类似,都是数据异步的问题,终于是解决这个头大的问题了、、、、代码艰难,写个博客记录一哈,
更多推荐
已为社区贡献2条内容
所有评论(0)