vue父传子的时父组件要传给子组件的值有延迟导致子组件接收失败

父组件内:

<template>
  <div class="wrapper">
    <!--内容管理-->
    父组件传递请求回来的值给子组件
    <v-sidebar :slidebarData="slidebarData" v-if="slidebarData.length>0"></v-sidebar>
    <v-tabs></v-tabs>
    <!--<div class="content">
            <router-view></router-view>
        </div>-->
  </div>
</template>

<script>
  import vTabs from './Tabs2.vue';
  import vSidebar from './Sidebar.vue';
  import { getRouteTree } from '../../api/api';
  export default {
    data() {
      return {
        collapse: false,
        slidebarData: [
        ]
      }
    },
    components: {
      vSidebar, vTabs
    },
    created() {
      getRouteTree().then(res => {
        console.log(res.data[0].subs)
        this.slidebarData = res.data[0].subs; //父组件请求数据
      })
      bus.$on('collapse', msg => {
        this.collapse = msg;
      })
    }
  }
</script>
<style type="text/css">
  .el-menu--horizontal>.el-menu-item {
    width: 12%;
  }
</style>

由于父组件在给子组件传递的值是请求回来的,所以会有延迟,而这时子组件也初始化完毕,导致子组件接收的值是父组件初始化是创建的默认为空的初始值,给子组件标签加上v-if="slidebarData.length>0",判断要传递的值不为空时再初始化子组件,就可以接收到父组件请求回来的值
子组件中:

<script>
	import bus from '../common/bus';
	export default {
		props: ["slidebarData"],
		data() {
			return {
				collapse: false
			}
		},
		created() {
			// 通过 Event Bus 进行组件间通信，来折叠侧边栏
			bus.$on('collapse', msg => {
				this.collapse = msg;
			})
		}
	}
</script>

通过porps接收就没问题了