父子組件傳值，子組件接收不到值

問題描述

父組件給子組件傳值，傳數字可以正常收到，傳對象{ } 就是收不到~

現在問題已經解決，但是我不太明白其中的原因，有大神知道原因后，幫忙評論答疑解惑。多謝！

父組件：

<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時 數據沒有加載完？不確定原因，所以就來記錄一下，有知道原理的大神，歡迎指導~~