vue中props和异步问题

Question

代码如下:

<parent-comp>
    <child-comp :user="user"><child-comp>
</parent-comp>

描述

• 在parent组件里面, 会有一个ajax来访问后台接口, 获取user对象, 然后把user对象传递到child里面, 通过props这种方式

已有方案

• 可以通过watch这个user对象来获取, 亲测可用, 但是这样感觉不太优雅

不可用的方式

• 不可以通过父组件的$broadcast方式,因为child组件是动态组件, 已亲测

问题

• 请问: 在child里面怎么样更加优雅的获取到user这个对象

Answer 1

你在child-comp标签上加个 v-if="user", 不就行了嘛， user 默认设为null, ajax拿到数据把数据填上去。

Answer 2

为props设置默认值

Vue.component('com', {
    props: {
        user: {
            type: Object,
            default: function () {
                return {
                    name: null,
                    age: null
                }
            }
        }
    }
})

Answer 3

刚要提问,发现同问.watch不仅不优雅,而且浪费性能, 比如我是分页的时候total没必要每次都计算. 同问同问!!

--------- 研究了一会 -------

实在不行用计算属性吧,虽然感觉上也不是很优雅,但是文档中说,只要相关的属性没有发生变化,就不会执行函数,而是缓存的值, 内部有一个Object.defineProperty看来是避免不了了.

我的:

补充: 还需要配合prop的默认值, 对默认值做判断然后决定渲染情况, 初始化child组件的时候, 默认还是有一个时间是得不到ajax的值

Answer 4

1. 简单的，把user作为parent的data

// parent
export default {
  data() {
   return {
      user: null
  },
  method: {
     ajax () {
       this.$http.get(url).then(response=> {
          this.user = response
       }, error => {
          // network errors
       }).catch(error => {
          // other erros
       })
     }
  },
  template: `
    <parent>
        <child :user="user"></child>
    </parent>`
}

1. 如果要多组件共用，上Vuex。