鍍金池/ 問答/Linux  HTML/ vue父子組件通訊問題

vue父子組件通訊問題

父組件 在created階段向后臺請求數(shù)據(jù)
clipboard.png
父組件向子組件傳值

<nutrient :nudata="nutrientInfo"></nutrient>

子組件接收

  created () {
    console.log(this.nudata)
    this.Na = this.nudata[3]
    this.CF = this.nudata[1]
    this.CHO = this.nudata[2]
    this.PR = this.nudata[0]
    this.energy =
      (this.nudata[0].value * 4 +
        this.nudata[1].value * 4 +
        this.nudata[2].value * 9) *
      4.18
  },
  props: ['nudata']

但是子組件并沒收到值

clipboard.png
可以看到在子組件接收的時候 父組件還沒請求完成 這個應該怎么解決 在那個生命周期里寫呢

回答
編輯回答
柒喵

data中要設(shè)置鍵值，否則vue不會對你的變量進行監(jiān)管

data () {
    return {
        nutrientInfo: []
    };
}
2018年1月26日 10:28
編輯回答
壞脾滊

原因：這個是因為 nudata 值得傳遞是一個異步過程，子組件的渲染在數(shù)據(jù)得到之前，當然得到的是undefined
解決：在<nutrient :nudata="nutrientInfo" v-if="isDataReady"></nutrient> isDataReady在數(shù)據(jù)獲取到后置為true

擴展：
Vue生命周期深入
Vue組件通信深入
Vue組件通信深入Vuex

2018年3月19日 23:31
編輯回答
巫婆

在父組件中使用computed
使用方法 https://cn.vuejs.org/v2/guide...

  computed: {
   
    },
2017年2月26日 20:10
編輯回答
瞄小懶

把你父子組件所需要的所有數(shù)據(jù) 在data中聲明好，這樣即使原始值是null 也不會報錯

2017年8月20日 20:49
編輯回答
情未了

把你父子組件所需要的所有數(shù)據(jù) 在data中聲明好，這樣即使原始值是null 也不會報錯 。
然后在子組件進行computed計算父組件傳遞過來的參數(shù)。

2018年2月9日 13:23
編輯回答
久礙你

父組件傳遞值加個v-if判斷條件，等值存在了再傳遞過去

2017年1月27日 01:03
編輯回答
帥到炸
computed:{
    Na (){return this.nudata[3]}
}
2017年1月12日 22:35
編輯回答
愿如初
created () {
    this.$nextTick(()=>{
        console.log(this.nudata)
    }) 
},
2017年7月7日 09:35