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

问题描述

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

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

父组件：

<template>
     <authorize :btnList="btnList"></authorize>
</template>
 <script>
      import authorize from '@components/authorize'
export default {
  name: 'fundRealTimeData',
  components: {
    authorize
  },
  created() {
    query().then(({data}) => {
      this.btnList = data.rows   /从接口取到的值，想要传给子组件
    })
  }

子组件：

export default {
    name: 'authorize',
    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时 数据没有加载完？不确定原因，所以就来记录一下，有知道原理的大神，欢迎指导~~