vue2,传入的props参数比较大时,在created等各生命周期引用时为空怎么解决？

Question

如下

父组件

<template>
    <my-editor :lesser="lesser" :larger="larger"></my-editor>
</template>

<script>
export default {
   data(){
     return {
       lesser:'lesser',
       larger:''
   },
    mounted:function(){
        this.$http.post('api.example.com/email',data).then(res=>{
            this.larger = res.body.emailText;
        })
    }
}
}
</script>

父组件传如lesser和larger两个参数，lesser很短，larger足够长（约一篇博客长度）

子组件

<template>
    <div contenteditable v-html="larger"></div>
</template>

<script>
export default {
   name:'my-editor',
   props:['lesser','larger'],
   created:function(){
        console.log(this.lesser,this.larger) // ×--> 'lesser',  
        setTimeout(()=>{
            console.log(this.lesser,this.larger) // √--> 'lesser','..一段长文..'
        },1000)
    }
}
</script>

子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。

想问下这种问题怎么解决？好像也没有props完全载入后的生命周期？

补充

开了个新工程对照了一下找到了真正的原因。。例子举得不对已做修正。
应该是父组件ajax获取了后台数据，这个异步获取的数据在子组件中得不到及时呈现，请问这个问题如何解决。

Answer 1

其实一个很简单的做法就是，当larger获取到数据之后，再开始渲染子组件my-editor
做法就是在my-editor上加v-if

<template>
    <my-editor v-if="larger.length" :lesser="lesser" :larger="larger"></my-editor>
</template>

Answer 2

1.首先子组件定义created阶段，父组件已经调用过了created阶段，这时，proper属性，data属性，method属性已初始化完成。
2.父子组件的初始化周期，从创建到挂载，是从外到内，再从内到外，且mixins的钩子函数总是在当前组件之前执行。
所以，父组件异步传值，子组件mounted阶段，也不一定能取得值。
因此，建议确定父组件异步获取值之后，再渲染子组件

Answer 3

可以用vuex插件设置state属性，这样各个组件都能获取到larger

Answer 4

可以改用 slot，并用 this.$slots.default 来获取。

Answer 5

既然是父组件ajax耗时的原因，那就在子组件里用watch吧，等watch到数据传递过来再触发操作

Answer 6

在子组件用mounted钩子就可以了

Answer 7

created是组件还没挂载，mounted是组件已经挂载了，所以用mounted就能获取到了

Answer 8

建议去看一下完整的vue的生命周期，created的调用时间是实例创建完成之后的回调钩子，实际上在这个时候$el
是不可见的，所以这个时候你去获取那些数据你当然拿不到