关于VUE props传值问题

使用props传值时无法在mounted处理怎么解决

最近遇到这个问题，父子组件使用props传值时无法在mounted中处理，
究其原因是因为父组件中要传递给子组件的 props 属性 是通过 ajax请求获取的， 请求的这个过程是需要时间的异步获取等待返回，然而子组件的渲染要快于ajax请求过程，所以此时在created 、 mounted 只执行一次的生命钩子函数中，执行完成后，此时 props 还没有传递（子组件），所以只能获取默认的props值，当props获取ajax完成后传递进来，此时生命周期函数已经执行完成了。

解决措施就是使用watch监听数据的变化，不在mounted中处理props传来的数据。

//子组件处理方式
export default{
  data(){
    return{
      deviceNumber: -1,
    }
  },
  mounted() {
    // if(Array.isArray(this.Data.deviceManage) && this.Data.deviceManage.length>0){//判断是否为数组
    //   this.deviceNumber = this.Data.deviceManage.length;//赋值
    // }
  },
  watch:{
    Data:function (val){
      this.deviceNumber = val.deviceManage.length
    }
  },
  props:['Data'],
  }

也可以在父组件强制赋值一下, 不是很推荐这种做法

 // parent
 <examAchTable ref="achTable" :dataList="examAchList"></examAchTable>
 
 // 若这里不强制赋值一下，在examAchList变化后直接调用子组件的transData方法时，子组件dataList仍是变化前的值
 this.$refs.achTable.dataList = this.examAchList
 this.$refs.achTable.transData(res.data.totalRecord)
 
 // child
 transData(total) {
      if (this.dataList) 
    // ...
}