[英]Sibling component communication vuejs 2
我有一个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的路由器视图中,该组件需要与“面包屑”组件进行通信以更新页面和面包屑的标题。
我尝试了全局事件总线,尝试了道具传递。 您会在收到发射时注意到console.log。 使用chrome中的VueJS调试器,它可以很好地更新,并填充变量。 但是我无法获取它来更新DOM /表示。 我到处搜索,并获得有关道具传递和全球巴士的建议,但缺少一些东西。
请帮忙 :)
提前致谢!
Vuex将更好地进行状态管理,以便您可以从所有组件访问和更新必要的状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.