vue父传子的时父组件要传给子组件的值有延迟导致子组件接收失败
父组件内:<template><div class="wrapper"><!--内容管理-->父组件传递请求回来的值给子组件<v-sidebar :slidebarData="slidebarData" v-if="slidebarData.length>0"></v-sidebar>...
·
父组件内:
<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接收就没问题了
更多推荐
已为社区贡献3条内容
所有评论(0)