0

我有一个 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>

面包屑.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/演示文稿。我已经到处搜索并获得了道具传递和全球巴士的建议，但缺少一些东西。

请帮忙 ：）

提前致谢！

4

1 回答 1

1

Vuex 将更好地进行状态管理，以便您可以访问和更新所有组件的必要状态。

于 2018-04-06T12:12:48.643 回答