在vue父组件中调用方法并传值给子组件碰到的渲染问题

今天碰到这样一个问题：

// 这是父组件
<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");
    },
}