<template>中的{{cdata}}會隨著父元件的值自動更新，但是<script>中無法使用this.cdata獲取父元件非同步傳過來的值 

//parent.vue
<template>
    <child :cdata="pdata"/>
</template>
<script>
data(){
    return(
        pdata: ''
    )    
},
created:(
    this.pdata = await getData()
),
methods:{
    async getData(){...}
}
</script>
 

// child.vue
<template>
    {{cdata}}  // 會根據父元件的傳值自動更新
</template>
<script>
props: {
    cdata: {
      types: String,
      defalt: ''
    }
},
created(){
    console.log(this.cdata)  // undefined
},
methods:{
    getData(){
        console.log(this.cdata)  // undefined
    }
}
</script>
 

原因分析

 在vue構建頁面的順序為，父元件構建 → 子元件構建 → 父元件獲取非同步資料 → 子元件獲取父元件非同步資料 → 子元件更新template。其中子元件的生命週期只在構建的時候發生一次。

• 父元件構建時，還沒有獲取完非同步資料，pdata是依照初始值A構建的。因此子元件執行生命週期的時候，獲取的資料也是A。
• 當父元件獲取完非同步資料B，父元件的template進行更新，資料傳遞到子元件，子元件的template自動更新，但是由於created,methods已經構建完畢，所以獲取不到資料B

解決方法

方法一：改動父元件

父元件中的資料先做非空判斷，如果是空就不初始化子元件，等父元件拿到非同步資料再初始化子元件

方法二：改動子元件

在子元件中加入watch方法，監聽父元件傳過來資料的變化。並且在watch中對資料進行進一步操作

export default {
  props: {
    cdata: {
      types: Object,
      defalt: {}
    }
  },
  watch: {
    user: function (newVal, oldVal) {
      this.cdata = newVal
      this.deatData() // 在此處對資料進行進一步處理
    }
  },
  data () {
    return {
      cdata: {},
    }
  }
}