Javascript Vue.js中的Eventbus不是'；t更新我的组件

我有两个组件，我想在另一个组件上显示用户在其中输入的内容。我真的不想使用像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>

添加HTML

去图书馆

标题
按我
从“../../main.js”导入{EventBus}
导出默认值{
数据：函数（）{
返回{
标题：“”
}
},
方法：{
导航主页（）{
这个.$router.push（'/'）；
},
emitGlobalClickEvent（）{
console.log（this.title）；
EventBus.$emit（'titleChanged'，this.title）；
}
}
}

侦听发出的事件并显示在其他组件上输入内容的文件：

<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>

现有项目

{{test}}

从“../main.js”导入{EventBus}；
导出默认值{
数据：函数（）{
返回{
测试：“”
}
},
创建（）{
EventBus.$on（'titleChanged'，（数据）=>{
log（'in here！'，data）；
本试验=数据；
});
}
}

---

console.log（'in here！'，data）被打印到控制台，因此我知道它正在接收它，但是
{test}
没有更新到用户输入的内容，当我单击返回组件查看它是否已更新时，它只是保持为空？有什么想法吗？
如果您正在使用vue路由器显示secound组件。原因可能是您每次只看到该组件的一个新实例，当该组件被销毁时，
test
的值将被重置。您可以将其绑定到一个（全局）变量以持久化
test:window.yourApp.test
。也许网页会哀悼，但这是可能的。就连eslint对这种情况也有一个ignore注释。
就像Reiner所说的，因为一旦切换页面，组件就会被破坏。尝试将路由器视图包装到保持活动状态：

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

也许这就像Reiner说的，因为如果你切换页面，组件就会被破坏。尝试将您的
路由器视图
包装在
保持活动状态
：`中。这真是太棒了，它成功了，每次都被摧毁，然后被重置！谢谢，如果你把它作为一个答案发布，我会把它标记为正确。你是对的，它每次都被重置，谢谢！只需将包装包裹起来，它就起作用了；）您的“当我单击返回组件以查看其是否已更新”是一个提示
<keep-alive include='name of component'>
  <router-view></router-view>
</keep-alive>