同级组件通信vuejs 2

Question

I have a Vue Component representing a page that looks like this (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 (script portion):

export default {
      created: function () {
        this.$root.$emit('page_title', 'Page Title')
      }
    }

The component defined by the Router (in this example labeled Content.vue) will be placed in the router-view of ParentComponent, that same component needs to communicate with the "breadcrumb" component to update the title of the page and breadcrumbs.

I have tried a global event bus, I have tried prop passing. you'll notice the console.log on receiving the emit. It updates just fine, using VueJS debugger in chrome, the variable is populated. But I can not get it to update the DOM/presentation. I've searched all over and get the recommendations of prop passing and global bus, but something is missing.

Please help :)

Thanks in advance!

Answer 1

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