vue-get-props

正常使用props

vue子组件的created、mounted生命周期内获取不到props中值的问题

正常情况下，父子组件之间的传值是通过 props
父组件使用v:bind ,子组件使用props接收值
eg：

<RecentSwiper :list="exhibitionData.recent" v-on:tapItem="tapToDetail" />

props: {
  list: {
    type: Array,
    default: []
  }
}

问题出现原因

这种情况下是没有问题的，也可以在methods方法中 使用 this.list

但是有一种情况是 list 的值是动态变化的，而且你要在created 或者 mounted构造函数中通过这个值去处理一些需求功能。这种情况下，在钩子函数中获取不到值，或者取到的只是默认值

解决方法

使用watch来监听list的变化，然后把newVal赋值给data里一个字段

父组件传值不改变
子组件处理

data () {
  return {
    listData: []
  }
},
watch: {
  list: function (newVal, oldVal) {
    this.listData = newVal
    newVal && this.checkPage(this.nowPage)    // this.checkPage() 就是需要处理需求的方法
  }
  
  // 深度监听，可监听到对象、数组的变化
  list: {
    handler (newVal, oldVal) {
      this.listData = newVal
      newVal && this.checkPage(this.nowPage)
    },
    deep: true,
    immediate: true
  }
},

赏

谢谢你请我吃糖果

支付宝

微信