状况1:
父组件parent.vue
// asyncData为异步获取的数据,想传递给子组件使用
<template>
<div>
父组件
<child :child-data="asyncData"></child>
</div>
</template>
<script>
import child from '../demo/children.vue'
export default {
data: () => ({
asyncData: ''
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncData = ' async data'
console.log('parent 组件结束')
}, 2000)
}
}
</script>
子组件child.vue
<template>
<div>
子组件{
{childData}}
</div>
</template>
<script>
export default {
props: ['childData'],
data: () => ({
}),
created () {
console.log("子组件created----- "+this.childData) // 空值
},
methods: {
}
}
</script>
子组件的html中的{
{childData}}的值会随着父组件的值而改变
但是created里面的却不会发生改变(生命周期问题)
案例二
parent.vue
<template>
<div>
父组件
<child :child-object="asyncObject"></child>
</div>
</template>
<script>
import child from '../demo1/children.vue'
export default {
data: () => ({
asyncObject: '