Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ChenPt opened this issue Aug 17, 2018 · 2 comments

Comments

@ChenPt
Copy link
Owner

commented Aug 17, 2018

假设需要修改父组件通过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

@ChenPt ChenPt added the VUE label Aug 17, 2018

@ChenPt ChenPt changed the title 2018/08/17 关于props的数据是异步获取的问题 2018/08/17 关于Vue的props的数据是异步获取的问题 Aug 17, 2018

@Liugq5713

This comment has been minimized.

Copy link

commented Sep 10, 2018

解决方法二 typo: computed

@ChenPt

This comment has been minimized.

Copy link
Owner Author

commented Sep 10, 2018

@Liugq5713 恩恩 写错单词了 已改

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.