我有一个Vue组件代表一个看起来像这样的页面（ParentComponent.vue）：
<template>
<div id="main-wrapper" class="appTravelytics">
<top-bar v-if="$route.path !== '/login'"></top-bar>
<div class="page-wrapper" v-if="$route.path !== '/login'">
<div class="container-fluid">
<breadcrumb ></breadcrumb>
<template>
<router-view :loggedIn="loggedIn"></router-view>
</template>
</div>
<footer-bar></footer-bar>
</div>
<template v-else>
<router-view :loggedIn="loggedIn"></router-view>
</template>
</div>
</template>
BreadCrumb.vue：
<template>
<h3 class="text-themecolor m-b-0 m-t-0">{{ title }}</h3>
</template>
<script>
export default {
data () {
return {
title: 'Welcome'
}
},
created: function () {
this.$root.$on('page_title', function (data) {
console.log(data)
this.title = data
this.$nextTick()
})
}
}
</script>
Content.vue（脚本部分）：
export default {
created: function () {
this.$root.$emit('page_title', 'Page Title')
}
}
路由器定义的组件（在此示例中标记为Content.vue）将放置在ParentComponent的路由器视图中，该组件需要与“breadcrumb”组件通信以更新页面 Headers 和面包屑 .
我试过一辆全球赛车，我试过道具传球 . 你会注意到接收发射的console.log . 它更新很好，使用chrome中的VueJS调试器，填充变量 . 但我无法更新DOM /演示文稿 . 我已经搜遍了所有并获得道具传递和全球公共汽车的建议，但缺少一些东西 .
请帮忙 ：）
提前致谢！
1 回答
Vuex将更好地用于状态管理，以便您可以从所有组件访问和更新必要的状态 .