Vue.js中的Eventbus没有更新我的组件

Question

我有两个组件，我想显示用户在另一个组件上输入的内容。我真的不想使用像vuex这样的状态管理器，因为它可能有点过分，因为它是一个小应用程序。

这是我的main.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import { routes }from './routes';

export const EventBus = new Vue();

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

组件，它发出名为addHtml.vue的事件。

<template>
    <div>
        <h1>Add HTML</h1>
        <hr>
        <button @click="navigateToHome" class="btn btn-primary">Go to Library</button>
        <hr>
        Title <input type="text" v-model="title">
        <button @click="emitGlobalClickEvent()">Press me</button>
    </div>

</template>

<script>
  import { EventBus } from '../../main.js'

  export default {
    data: function () {
      return {
        title: ''
      }
    },
    methods: {
      navigateToHome() {
        this.$router.push('/');
      },
      emitGlobalClickEvent() {
        console.log(this.title);
        EventBus.$emit('titleChanged', this.title);
      }
    }
  }
</script>

侦听发出的事件并显示在另一个组件上输入的内容的文件：

<template>
    <div>
        <h1>Existing Items</h1>
        <hr>
        <p>{{ test }}</p>
    </div>
</template>

<script>
    import { EventBus } from '../main.js';

    export default {
      data: function () {
        return {
          test: ''
        }
      },
      created() {
        EventBus.$on('titleChanged', (data) => {
          console.log('in here!',data);
          this.test = data;
        });
      }
    }

</script>

监听器中的console.log('in here!',data);被打印到控制台上，因此我知道它正在捡起它，但是当我单击组件上查看更新后的组件时，{{ test }}并没有被更新到用户输入的内容，它只是保持空白吗？有什么想法吗？

Answer 1

这就像Reiner说的，因为一旦切换页面，组件就会被销毁。尝试将您的路由器视图包装在“保持生存”中：

<keep-alive>
  <router-view><router-view>
</keep-alive> 

还有。如果只想保持一个特定组件/页面的状态，可以使用include标记：

<keep-alive include='name of component'>
  <router-view></router-view>
</keep-alive>

Answer 2

如果您使用vue-路由器来显示secound组件.原因可能是您每次只看到该组件的一个新实例，当组件被破坏时，test的值将被重新设置。可以将其绑定到(全局)变量以持久化test: window.yourApp.test。也许webpack会哀悼，但这是可能的。即使是埃林特也对这类案件发表了忽视的评论。