vue子父组件传值，想要等axios返回之后再渲染子组件，但是不得行，怎么解决

Question

vue里面想通过prop传值给子组件，本身父组件绑定的值有默认值，希望能在axios后台返回数据之后，在本身的数据上extend 更多的对象再传到子组件，这个问题怎么解决呢？

<template>
  <a-component  :opt="opt" ></a-component>
</template>
<script>
  export default{
    data(){
      return {
        opt:{
          a:1,
          b:2
        }
      }
    },
    methods:{
        getList(){
            axios.get('').then(function (res) {
          _.extend(_this.opt,{
              c:3,d:4
          })
        })
        //打debugger看到是先进入子组件created方法接收为opt默认值，才到这里走接口扩展opt对象
        }
    }
  }
</script>

Answer 1

如果想让子组件在父组件有哪个数据的时候再渲染，可以在父组件上加一个判断条件，例如<a-component :opt="opt" v-if="opt.c == 3"></a-component>。但是即使是子组件先渲染出来了，但当axios请求结束后，即opt的数据改变后，也会自动传递给子组件，从而更改子组件的状态。所以感觉非要等到数据extend后再渲染子组件没有什么太大的必要。