学习笔记230827--vue项目中，子组件拿不到父组件异步获取数据的问题

🧋 问题描述

父组件的数据是请求后台所得，因为是异步数据，就会出现，父组件的值传递过去了，子组件加载不到，拿不到值的问题。

下面从同步数据传递和异步数据传递开始论述问题

🧋🧋1. 父组件传递的是同步数据

• 父组件

      <template> <div class="parent"><div class="child"><props-children :data="dataJson"></props-children></div><input type="text"  v-model="dataJson"/></div></template><script>import propsChildren from '../../component/props/props_children.vue'export default {components: { propsChildren },data(){ return{dataJson:"初始化数据"}},created(){console.log('父created',this.dataJson)},beforeuUpdate(){console.log('父beforeupdated',this.dataJson)},updated(){console.log('父updated',this.dataJson)},beforeDetroy(){console.log('父beforeDetroy',this.dataJson)},detroyed(){console.log('父detroyed',this.dataJson)}}</script><style scoped>.child{width:600px;height:600px;background:#eee;}</style>
  

• 子组件

  <template><div>我是子组件<br><br><br>获取到父组件数据：{{data}}<br><br><br><input type="text"  v-model="data"/></div></template> <script>export default {mounted(){console.log('子组件拿到数据',this.data)},props:{data:{default:"",require:true,type:String}},created(){console.log('子created',this.data)},beforeUpdate(){console.log('子beforeupdated',this.data)},updated(){console.log('子updated',this.data)},beforeDetroy(){console.log('子beforeDetroy',this.data)},detroyed(){console.log('子detroyed',this.data)}}</script><style></style>
  

如图所示：

• 在created阶段，父组件的初始化数据就已经传递给了子组件的props

  

• 在created阶段，把获取的同步数据赋值给初始化数据，不会触发update钩子函数，子组件加载也能拿到数据

  

  

• 父组件更新数据（触发update），子组件也会同步更新，但是先更新的是子组件里的数据

  

• 子组件去更新props里的数据，父组件不但接收不到，而且还会报错

  

父子组件声明周期执行顺序

加载渲染数据过程

父：beforeCrete --> 父：created --> 父：beforeMount --> 子：beforeCreate --> 子：created --> 子：beforeMount --> 子：mounted --> 父：mounted

更新渲染数据过程

父：beforeUpDate --> 子：beforeUpdate --> 子：updated --> 父：updated

销毁组件数据过程

父：beforeDestroy --> 子：beforeDestroy --> 子：destroyed --> 父:detroyed

但是，如果父组件获得是后台请求的异步数据就会出现问题。

🧋🧋 2.父组件传递的是异步数据

• 父组件

<template><div class="parent"><div class="child"><props-children :data="dataJson"></props-children></div><input type="text"  v-model="dataJson"/></div>
</template><script>
import propsChildren from '../../component/props/props_children.vue'
export default {components: { propsChildren },data(){ return{dataJson:"初始化数据"}},created(){// 模拟获取后台异步数据setTimeout(()=>{this.dataJson="父组件数据"},200)console.log('父created',this.dataJson)},beforeUpdate(){console.log('父beforeupdated',this.dataJson)},updated(){console.log('父updated',this.dataJson)},beforeDetroy(){console.log('父beforeDetroy',this.dataJson)},detroyed(){console.log('父detroyed',this.dataJson)}
}
</script><style scoped>.child{width:600px;height:300px;background:#eee;}
</style>

• 子组件

<template><div>我是子组件<br><br><br>获取到父组件数据：{{data}}<br><br><br><input type="text"  v-model="data"/></div>
</template> <script>
export default {mounted(){console.log('子组件拿到数据',this.data)},props:{data:{default:"",require:true,type:String}},created(){console.log('子created',this.data)},beforeUpdate(){console.log('子beforeupdated',this.data)},updated(){console.log('子updated',this.data)},beforeDetroy(){console.log('子beforeDetroy',this.data)},detroyed(){console.log('子detroyed',this.data)}
}
</script><style></style>

【产生问题的原因】
父组件异步获取后台数据， 这时候加载渲染数据生命周期已经走完，只能更新数据，触发更新渲染生命周期，所以子组件加载时，永远只能拿到父组件的初始数据，拿不到父组件更新后的数据，但是，但是props是可以等的，页面是可以拿到异步的数据渲染的，所以就出现如上所示 的结果。

🧋解决问题

如何子组件加载获取不到父组件异步获取数据的问题

• 方案1：使用v-if控制子组件渲染的时机，父组件拿到后台异步数据后，再渲染子组件，加载子组件的时候就能得到父组件 的异步数据。

• 方案2：子组件使用watch监听父组件传递过来的数据。

  这种方式父组件正常传递数据即可，不要做什么代码处理，只要在子组件中加一个监听即可。

🧋问题总结

子组件props如果绑定动态数据，默认只在加载时传递，也就是说只传一次。props绑定视图层，可以传多次。父组件created赋值同步数据不会触发updated，同步数据可以在created时就传递给子组件。父组件赋值异步数据，触发update，子组件也会在update才能拿到数据，所以加载时只能拿到父组件的初始化数据。