父子组件传值，子组件接收不到值

问题描述

父组件给子组件传值，传数字可以正常收到，传对象{ } 就是收不到~

现在问题已经解决，但是我不太明白其中的原因，有大神知道原因后，帮忙评论答疑解惑。多谢！

父组件：

<template>
  <recordPage :btnList="btnList"></recordPage>
</template>
<script>
import recordPage from './recordPage.vue'

export default {
  name: 'index',
  data () {
    return { btnList: null }
  },
  components: { recordPage },
  created () {
    query().then(({ data }) => {
      this.btnList = data   // 从接口取到的值，想要传给子组件
    })
  }
}
</script>

子组件：

export default {
    name: 'recordPage',
    props: {
      btnList: {
         type: Object,
         default: {}
  }
},
created() {
     console.log('created btnList=====' + this.btnList)
},
mounted() {
    console.log('mounted btnList=====' + this.btnList)
}

结果呢，两次打印值都为空,空 空！！

 

我以为是传的不对，但是当父组件给子组件传递的参数是数字时，竟然有输出了。这就很诡异了

但是我并不想要数字，我想要传的是个对象。没办法，最后用了最不喜欢的一招，watch。子组件页面用watch监听btnList的变化，有值的话，再去判断，再去渲染页面。

watch: {
  btnList(val) {
    this.showBtn(val)
  }
}

嗯，最后解决了，值也拿到了。但是为什么传数字可以，传对象就不行？难道是console时 数据没有加载完？不确定原因，所以就来记录一下，有知道原理的大神，欢迎指导~~