为什么我父传子，打印undefined

Question

为什么我传值接不到，是哪里错了吗

父组件

<barchart2 :chartsData="chartsData"></barchart2>

export default {
    data(){
        return{
            chartsData:[]
        }
    },
    mounted() {
       this.getFault('DAY');
    },
    methods: {
         getFault(dateType = 'DAY'){
            getFaultList({type:dateType}).then(res=>{
                this.chartsData = res.data.data;//打印成功是个数组对象[{},{}]
            })
        }
    },
    watch: {},
};

子组件

export default {
props:{
    chartsData:{
        type:Array
    }
},
created() {
    console.log(this.chartsData);//undefined
},

Answer 1

因为你拉取数据是异步的，数据还没有拉取到的时候子组件已经加载了
其他什么都不改变的情况下可以在组件上加个v-if，当异步拉取到值的时候再加载组件

Answer 2

如果要在子组件打印父组件传来的数据必须是在beforeUpdate和updated生命周期才能监听的到。
这种情况可以使用watch去监听值发生改变之后再去处理，或者在定义props的对象里面设置default属性的默认值

Answer 3

首先确认res.data.data是有值的，而不是res.data?

getFaultList({type:dateType}).then(res=>{
  console.log(res.data.data)
  this.chartsData = res.data.data;//打印成功是个数组对象[{},{}]
})

Answer 4

同意楼上。
你可以去掉异步请求，直接打印数据确定下
能有空数组就能确定是请求的res.data.data是undefined了
我这边环境测试父传子数据 created mounted阶段是能直接打印数据的，异步请求过慢打印的也只是空对象。

Answer 5

耗时操作，添加个watch监听chartsData即可。

export default {
props:{
    chartsData:{
        type:Array
    }
},
watch: {
    chartsData(newVal) {
        console.log(newVal)
    }
},
created() {
    console.log(this.chartsData);//undefined
},

Answer 6

建议你去看一下父子组件的生命周期触发顺序，父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted,也就是说子组件里面打印的时候，父组件还没有发送请求

Answer 7

父组件的代码，粘贴的全吗？如果全代码肯定会报错的