Vue props传参获取失败解决方法

---

问题背景

在父组件，通过ajax请求给controlManage赋值，再将值传到Test子组件，子组件在created、mounted方法均获取不到数据。

<Test :control-manage="controlManage" />

解决方法

子组件：

export default {
  props: {
    controlManage: {
      type: Array,
      default() { return [] }
    }
  },
  data() {
    return {
      data: []
    }
  },
  // 监听
  watch: {
    //正确给 data 赋值的 方法
    controlManage: function(newVal, oldVal) {
      this.data = newVal.filter(p => p.isControl === true)  // newVal即是controlManage，此处根据条件赋值
      newVal && this.doExecute() // newVal存在的话执行doExecute函数（可选）
    }
  },
  methods: {
    doExecute(){
      // 执行其他逻辑
    }
  },
  mounted() {
    // 在created、mounted这样的生命周期, 给this.data赋值会失败
    // this.data = this.controlManage
  }
}

总结

出现这种情况的原因，因为父组件中传递的props属性是通过发生ajax请求回来的，请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时created、mounted这样的只会执行一次的生命周期钩子，已经执行了，但是props还没有流进来（子组件），所以只能拿到默认值。