在Vue中，父组件的异步数据获取先于子组件的构建。当父组件的异步数据（如通过setTimeout模拟）准备就绪后，需要通过props将数据传递给子组件。子组件在created阶段可能无法获取到完整的父组件数据，因为此时数据还在异步加载中。为解决这个问题，可以使用watch监听props的变化，或者在父组件中等待数据获取后再创建子组件（如使用v-if）。这样可以在数据变更时确保子组件接收到最新的值。
在vue构建页面的顺序为，父组件构建 → 子组件构建 → 父组件获取异步数据 → 子组件获取父组件异步数据 → 子组件更新，也就是说构建的时候生命周期只会执行一次。
父组件：
父组件：
获取数据
import child from './components/child.vue';
export default {
name: 'app',
props: [],
data() {
return {
asyncObject: null,
};
},
components: {
child,
},
methods: {
getData() {
setTimeout(() => {
this.asyncObject = { items: [4, 5, 6] };
console.log('getData finish');
}, 2000);
},
},
};
子组件：
{{childObject}}
export default {
props: {
childObject: {
types: Object,
defalt: {},
},
},
data() {
return {};
},
methods: {
updata(val) {
console.log(val);
},
},
created() {
this.updata(this.childObject);
},
};
刷新页面后，发现子组件打印的是null，生命周期执行完一次之后就不会再执行了，其实这是再正常不过的了，如果每次都想走生命周期，那就只能把组件销毁再生成，例如用v-if这种方法。
如果不想每次都销毁组件，那就需要改动一下子组件，使用watch去动态的监听，也能达到效果：
{{childObject}}
export default {
props: {
childObject: {
types: Object,
defalt: {},
},
},
data() {
return {};
},
watch: {
childObject(n,o) {
this.updata(o);
this.updata(n);
},
},
methods: {
updata(val) {
console.log(val);
},
},
created() {
this.updata(this.childObject);
},
};
感觉说的有一点乱，可能是表达的不太清楚吧……
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
