兄弟组件通信 vuejs 2
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')
}
}
Router定义的组件(在本例中标记为Content.vue)将放置在ParentComponent的router-view中,该组件需要与"breadcrumb"组件通信以更新页面标题和面包屑。
我试过全局事件总线,我试过道具传递。您会在收到发射时注意到 console.log。它更新得很好,使用 chrome 中的 VueJS 调试器,变量被填充。但是我无法让它更新DOM/presentation。我到处搜索并获得了 prop passing 和 global bus 的建议,但缺少一些东西。
请帮忙:)
提前致谢!
Vuex 将更好地进行状态管理,以便您可以从所有组件访问和更新必要的状态。
我有一个代表页面的 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')
}
}
Router定义的组件(在本例中标记为Content.vue)将放置在ParentComponent的router-view中,该组件需要与"breadcrumb"组件通信以更新页面标题和面包屑。
我试过全局事件总线,我试过道具传递。您会在收到发射时注意到 console.log。它更新得很好,使用 chrome 中的 VueJS 调试器,变量被填充。但是我无法让它更新DOM/presentation。我到处搜索并获得了 prop passing 和 global bus 的建议,但缺少一些东西。
请帮忙:)
提前致谢!
Vuex 将更好地进行状态管理,以便您可以从所有组件访问和更新必要的状态。