问题描述：

父组件传如lesser和larger两个参数，并且是ajax从服务器获取的。子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。

问题来源：https://segmentfault.com/q/1010000008912491

提问者的主要问题是没有搞清楚，vue实例的生命周期，created函数只会执行一次。

父组件：
<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>

子组件
<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)
    }
}
</scrip>

如果想按这个思路来做，有两种解决方案：

第一，一个很简单的做法就是，当larger获取到数据之后，再开始渲染子组件my-editor

做法就是在my-editor上加v-if

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

第二，使用watch侦听属性检测props参数，然后执行相关操作

export default {
	props:['larger'],

	data: function () {
		return {
			myLarger:"", //昵称
		}
	},

	watch: {
		larger: function(){
			this.myLarger = this.larger;
		}
	},
  ...
}

<input v-model="myLarger">



真诚赞赏，手留余香

微信支付