vue 父组件异步值传递给子组件 子组件进行数据处理

模拟异步

父组件

<template>
 <div>
  父组件
  <child :child-data="asyncData" ></child>
 </div>
</template>
 
<script>
 import child from './child'
 export default {
  data(){
      return {
          asyncData:''
      }
  },
  components: {
   child
  },
  created() {
   // setTimeout模拟异步数据
   setTimeout(() => {
    this.asyncData = 'async data'
    console.log('parent finish')
   }, 2000)
  }
 }
</script>

子组件

<template>
 <div>
  子组件{{childData}}
 </div>
</template>
 
<script>
 export default {
  props: ['childData'],
  data: () => ({
  }),
  created () {
   console.log(this.childData) 
  },
  methods: {
  }
 }
</script>

问题描述

父组件获取异步数据，并传递给子组件，直接显示没有问题，若对数据进行处理，则拿到的数据都是父组件初始值。

原因

父组件 获取异步数据 还没等到数据返回 子组件 created已经执行完毕

父子组件的生命周期

一、加载渲染过程

父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子 beforeMount–>子 mounted–>父mounted

二、子组件更新过程

父beforeUpdate --> 子 beforeUpdate–> 子 updated–> 父updated

三、销毁过程

父beforeDestroy --> 子 beforeDestroy–> 子 destroyed–> 父destroyed

解决

• 方法一
  父组件

    <child :child-data="asyncData" v-if="asyncData"></child>
  

  当asyncData有值得时候，在加载子组件
• 方法二
  子组件

  watch:{
    childData(val){
        console.log('子组件 数据处理',val)
    }
  },
  

• 其他方法
  将数据存到store，子组件监听数据变化（watch/computed）