Vue 子组件mounted拿到父组件mounted后的数据
1.同步引入时生命周期顺序为:父组件的beforeCreate、created、beforeMount ——>所有子组件的beforeCreate、created、beforeMount ——>所有子组件的mounted ——>父组件的mounted总结:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载异步引入时生命周期顺序为:父组件的beforeCreate、crea
·
1.同步引入时生命周期顺序为:
父组件的beforeCreate、created、beforeMount ——>
所有子组件的beforeCreate、created、beforeMount ——>
所有子组件的mounted ——>
父组件的mounted
总结:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载
异步引入时生命周期顺序为:
父组件的beforeCreate、created、beforeMount、mounted -->
子组件的beforeCreate、created、beforeMount、mounted
总结:父组件创建,父组件挂载;子组件创建,子组件挂载。
2.子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
3.父组件更新过程
父beforeUpdate->父updated
4.销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
所以我们的需求是父组件在挂载的时候就把值给子组件
父组件
<template>
<bottomLeft
:type=sensorType
:sendData="data" />
</template>
<script>
export default {
data () {
return {
sensorType: 'A',
data: {}
}
},
beforeMount () {
// _isMounted是当前实例mouned()是否执行 此时为false
window.parentMounted = this._isMounted
},
// 渲染时就将请求值给子组件(由于生命周期执行顺序的问题,加了判断)
mounted () {
getData().then(res => {
if(res.code === 200) {
this.data= res.data
}
}).catch(err => {
console.log(err)
})
// _isMounted是当前实例mouned()是否执行 此时为true
window.parentMounted = this._isMounted
}
}
</script>
子组件
template
<linegraph
:options="ViewData"
></linegraph>
script
data () {
return {
ViewData: {}
}
},
props: ['type', 'data'],
watch: {
data () {
this.ViewData = this.data
},
deep: true
},
mounted () {
// 子组件加个定时器,加上条件判断
let pMountedTimer = window.setInterval(() => {
if (window.parentMounted ) {
window.clearInterval(pMountedTimer)
// 下面写子组件想在mounted时执行代码(此时父组件的mounted已经执行完毕)
this.ViewData = this.data
}
}, 500)
}
更多推荐
已为社区贡献6条内容
所有评论(0)