vue——父子组件传输异步数据

296 阅读1分钟

对于父子组件的生命周期钩子的顺序是: 父组件created – 子组件mounted

所以我们在父子组件传输数据的时候,常常在子组件的mounted去调用这个数据。

父子之间传输的数据,一般有两类, 一个是在父组件中定义的变量,另一个就是父组件接口的数据,也就是异步数据。 父组件定义的变量是没什么好说的,满足上面说的钩子顺序。

但是当传输的是异步数据时,就不按照上面的顺序了。

当父组件去获取异步数据的时候,不会停止子组件的渲染。 所以就造成一种情况,就是子组件已经渲染完了,但是数据还没传到子组件中。

解决方法:

方法1,在父组件中,子组件的标签里,加上v-if判断,等父组件的异步数据到了之后,再去渲染子组件。

// 父组件中 <子组件 v-if=‘数据!=null’ :数据=‘数据’>

方法2,在子组件中,用watch来监听父组件传来的数据,当异步数据传到子组件的时候,再去更新子组件。

// 子组件中
watch:{ 
数据:function(new,old){ 
this.updata(new) 
} 
} ,
methods:{ 
updata(val){ 
consolo.log(val) // 这就是传过来的值 
    } 
}