文章目錄

• 模擬非同步
• 問題描述
• 原因
• 解決

模擬非同步

父元件

<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已經執行完畢

父子元件的生命週期

解決

• 方法一
  父元件

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

  當asyncData有值得時候，在載入子元件
• 方法二
  子元件

  watch:{
    childData(val){
        console.log('子元件 資料處理',val)
    }
  },
  

• 其他方法
  將資料存到store，子元件監聽資料變化（watch/computed）