解决vue开发时子组件数据和组件渲染的异步问题

在开发中有时候会遇到子组件渲染完成了请求也没响应回来的情况
父子组件的钩子并不会等待请求返回,请求是异步的,VUE设计也不能因为请求没有响应而不执行后面的钩子,因此,偶尔会遇到请求也正常请求了,数据也能在控制台打印出来,但是页面就是没渲染数据的问题,下面总结一下解决方案:

1.在父组件使用子组件的时候添加v-if判断

在渲染子组件的时候加上一个条件,data1是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后,才会执行子组件的created,mounted。最后执行父组件的mounted。

2.在自组件watch prop变量

在父组件请求数据完成并赋值对应的传给子组件的变量后,子组件prop发生改变,子组件watch对应的prop,再做相关操作

watch:{
   "props中的变量":{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.xxx(子组件data定义变量) = newVal
        })
      }
    },
}

你可能感兴趣的:(解决vue开发时子组件数据和组件渲染的异步问题)