问题的出现:

之前写静态页面的时候,直接父向子传值,是直接能渲染出父组件给子组件的值,但是加上请求之后,就出现了一个问题,就是在组件创建和渲染完毕时,子组件的值才拿到,子组件并没有实时的更新模版(简直就是灾难始终慢我一步!!!)

产生的原因:

子组件中的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>

跟上一篇的报错有些类似,都是数据异步的问题,终于是解决这个头大的问题了、、、、代码艰难,写个博客记录一哈,
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐