vue父子组件通讯问题

Question

父组件 在created阶段向后台请求数据

父组件向子组件传值

<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']

但是子组件并没收到值

可以看到在子组件接收的时候 父组件还没请求完成 这个应该怎么解决 在那个生命周期里写呢

Answer 1

原因：这个是因为 nudata 值得传递是一个异步过程，子组件的渲染在数据得到之前，当然得到的是undefined
解决：在<nutrient :nudata="nutrientInfo" v-if="isDataReady"></nutrient> isDataReady在数据获取到后置为true

扩展：
Vue生命周期深入
Vue组件通信深入
Vue组件通信深入Vuex

Answer 2

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

  computed: {
   
    },

Answer 3

把你父子组件所需要的所有数据 在data中声明好，这样即使原始值是null 也不会报错

Answer 4

把你父子组件所需要的所有数据 在data中声明好，这样即使原始值是null 也不会报错 。
然后在子组件进行computed计算父组件传递过来的参数。

Answer 5

computed:{
    Na (){return this.nudata[3]}
}

Answer 6

created () {
    this.$nextTick(()=>{
        console.log(this.nudata)
    }) 
},

Answer 7

父组件传递值加个v-if判断条件，等值存在了再传递过去

Answer 8

data中要设置键值，否则vue不会对你的变量进行监管

data () {
    return {
        nutrientInfo: []
    };
}