今天碰到这样一个问题:
// 这是父组件
<menu-item
:fitems="items"
></menu-item>
import MenuItem from "./MenuItem";
mounted() {
console.log("father created");
this.getRoute();
},
methods: {
async getRoute() {
const res = await listRoute();
this.items = JSON.parse(res.rows[0].remark);
this.routeId = res.rows[0].routeId;
console.log(this.items, "father");
},
}
// 这是子组件
<el-card>
<el-tag
@close="moveQuickEntryItem(item)"
:key="index"
closable
v-for="(item, index) in fitems"
>{{ item.meta.title }}</el-tag
>
</el-card>
props: {
fitems: {
required: true,
type: Array
},
}
created() {
console.log("son created");
console.log(this.fitems, "son");
},
然后大家可以先想想控制台会打印出啥?
控制台打印的数据大概率不符合你的预期:
father created
son created
[], "son" // 子组件中没有数据的空数组
[{...}], "father" // 父组件中有数据的数组
之后发现原因是因为created中的异步请求会挂起,执行其中的同步任务,等同步任务执行完毕之后就会去执行子组件中的created,而在created中挂起的异步请求则会在父组件的updated中返回,所以其中一个解决办法就是在updeted中来接收数据,另一个就是下边这个:
可以给依赖请求数据的子组件加一个标识符,也就是说等请求数据返回了再让子组件显示
<menu-item
v-if="flag" //加上标识符
:fitems="items"
></menu-item>
import MenuItem from "./MenuItem";
mounted() {
console.log("father created");
this.getRoute();
},
methods: {
async getRoute() {
const res = await listRoute();
this.items = JSON.parse(res.rows[0].remark);
this.routeId = res.rows[0].routeId;
this.flag = true // 数据返回后让子组件显示
console.log(this.items, "father");
},
}