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

我又来了，今天被一个钩子函数，父子组件坑了一个下午！！生气！！

需求是这样的，就是很简单的父子组件传值，但是吧，，很诡异，，父组件给子组件传值，传数字可以正常收到，传对象{} 就收不到，怎么改就是接收不到。

很诡异吧~~

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

情况如下：

父组件：

<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时 数据没有加载完?不知道，太诡异了，，所以就来记录一下，有知道原理的大神，欢迎指导~~

 

转载于:https://www.cnblogs.com/lemoncool/p/9378985.html