2018/08/17 关于Vue的props的数据是异步获取的问题

[ChenPt]

假设需要修改父组件通过Props传递过来的异步数据。

如果父组件通过props传给子组件的数据是调用接口去请求得到的，即是异步得到的，那么在子组件的生命周期内只能得到props时的初始值，也就是接口还未返回时的默认值。如果需要对props的数据进行修改，无法在组件的生命周期内将props存储到一个新变量再进行修改，因为那时候的props的数据不是接口返回来的。

解决方法一

通过watch，监听props过来的数据是否发生了更新，当其发生更新时，新的值为接口返回的数据，可以对其进行存储并进行修改。

watch: {
  propData (newVal) {
    this.afterData = JSON.parse(JSON.stringify(newVal))  // 简单的深拷贝，防止污染父组件的数据
    this.afterData.name = newVal.name + 'change'
  }
}

解决办法二

通过计算属性

props: {
  propData: {
    type: Object,
    default: {}
  }
}
computed: {
  afterData () {
   // 修改值， afterData所依赖的propData的数据更新后，就会更新其本身的值
    var res = JSON.parse(JSON.stringify(this.propData))
    res.pt.name = this.propData.pt.name + 'compute'
    return res
  }
}

解决办法三

直接在父组件进行修改，而后将修改过的数据通过props传给子组件，子组件里的props数据是响应式的，当props更新，DOM也会ReRender。

例子 JSFiddle

[Liugq5713]

解决方法二 typo: computed

[ChenPt]

@Liugq5713 恩恩 写错单词了 已改