Vue2.5中,父组件created钩子异步获取数据,子组件没有更新绑定的参数

问题描述:

父组件传如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">


 

 

 

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
765 文章
4 教程
8 项目
随机推荐
MySQL 批量插入数据时如何解决重复问题
FFmpeg 修改默认音轨
JavaScript 修改内容和属性
Nine 主题
MySQL DATETIME 时间查询和转换
WordPress 的用户角色和权限
Node.js 的 URL 的模块缺陷
RESTful API 执行 delete 返回204无法获取 Body