免费开通的网站,外国网站在中国做推广,珠海免费景点,wordpress 商城id连续#x1f9cb; 问题描述
父组件的数据是请求后台所得#xff0c;因为是异步数据#xff0c;就会出现#xff0c;父组件的值传递过去了#xff0c;子组件加载不到#xff0c;拿不到值的问题。 下面从同步数据传递和异步数据传递开始论述问题
#x1f9cb;#x1f9cb;1… 问题描述
父组件的数据是请求后台所得因为是异步数据就会出现父组件的值传递过去了子组件加载不到拿不到值的问题。 下面从同步数据传递和异步数据传递开始论述问题
1. 父组件传递的是同步数据 父组件 template div classparentdiv classchildprops-children :datadataJson/props-children/divinput typetext v-modeldataJson//div/templatescriptimport propsChildren from ../../component/props/props_children.vueexport default {components: { propsChildren },data(){ return{dataJson:初始化数据}},created(){console.log(父created,this.dataJson)},beforeuUpdate(){console.log(父beforeupdated,this.dataJson)},updated(){console.log(父updated,this.dataJson)},beforeDetroy(){console.log(父beforeDetroy,this.dataJson)},detroyed(){console.log(父detroyed,this.dataJson)}}/scriptstyle scoped.child{width:600px;height:600px;background:#eee;}/style子组件 templatediv我是子组件brbrbr获取到父组件数据{{data}}brbrbrinput typetext v-modeldata//div/template scriptexport default {mounted(){console.log(子组件拿到数据,this.data)},props:{data:{default:,require:true,type:String}},created(){console.log(子created,this.data)},beforeUpdate(){console.log(子beforeupdated,this.data)},updated(){console.log(子updated,this.data)},beforeDetroy(){console.log(子beforeDetroy,this.data)},detroyed(){console.log(子detroyed,this.data)}}/scriptstyle/style如图所示 在created阶段父组件的初始化数据就已经传递给了子组件的props 在created阶段把获取的同步数据赋值给初始化数据不会触发update钩子函数子组件加载也能拿到数据 父组件更新数据触发update子组件也会同步更新但是先更新的是子组件里的数据 子组件去更新props里的数据父组件不但接收不到而且还会报错
父子组件声明周期执行顺序
加载渲染数据过程
父beforeCrete -- 父created -- 父beforeMount -- 子beforeCreate -- 子created -- 子beforeMount -- 子mounted -- 父mounted
更新渲染数据过程
父beforeUpDate -- 子beforeUpdate -- 子updated -- 父updated
销毁组件数据过程
父beforeDestroy -- 子beforeDestroy -- 子destroyed -- 父:detroyed
但是如果父组件获得是后台请求的异步数据就会出现问题。 2.父组件传递的是异步数据
父组件
templatediv classparentdiv classchildprops-children :datadataJson/props-children/divinput typetext v-modeldataJson//div
/templatescript
import propsChildren from ../../component/props/props_children.vue
export default {components: { propsChildren },data(){ return{dataJson:初始化数据}},created(){// 模拟获取后台异步数据setTimeout((){this.dataJson父组件数据},200)console.log(父created,this.dataJson)},beforeUpdate(){console.log(父beforeupdated,this.dataJson)},updated(){console.log(父updated,this.dataJson)},beforeDetroy(){console.log(父beforeDetroy,this.dataJson)},detroyed(){console.log(父detroyed,this.dataJson)}
}
/scriptstyle scoped.child{width:600px;height:300px;background:#eee;}
/style子组件
templatediv我是子组件brbrbr获取到父组件数据{{data}}brbrbrinput typetext v-modeldata//div
/template script
export default {mounted(){console.log(子组件拿到数据,this.data)},props:{data:{default:,require:true,type:String}},created(){console.log(子created,this.data)},beforeUpdate(){console.log(子beforeupdated,this.data)},updated(){console.log(子updated,this.data)},beforeDetroy(){console.log(子beforeDetroy,this.data)},detroyed(){console.log(子detroyed,this.data)}
}
/scriptstyle/style 【产生问题的原因】 父组件异步获取后台数据 这时候加载渲染数据生命周期已经走完只能更新数据触发更新渲染生命周期所以子组件加载时永远只能拿到父组件的初始数据拿不到父组件更新后的数据但是但是props是可以等的页面是可以拿到异步的数据渲染的所以就出现如上所示 的结果。
解决问题
如何子组件加载获取不到父组件异步获取数据的问题 方案1使用v-if控制子组件渲染的时机父组件拿到后台异步数据后再渲染子组件加载子组件的时候就能得到父组件 的异步数据。 方案2子组件使用watch监听父组件传递过来的数据。 这种方式父组件正常传递数据即可不要做什么代码处理只要在子组件中加一个监听即可。
问题总结
子组件props如果绑定动态数据默认只在加载时传递也就是说只传一次。props绑定视图层可以传多次。父组件created赋值同步数据不会触发updated同步数据可以在created时就传递给子组件。父组件赋值异步数据触发update子组件也会在update才能拿到数据所以加载时只能拿到父组件的初始化数据。
