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

如果您使用vue-router显示secound组件。原因可能是您每次只看到该组件的新实例，并且在销毁组件时将重置test的值。您可以将其绑定到（全局）变量以保持test: window.yourApp.test。也许webpack会哀悼但是有可能。对于这种情况，即使是eslint也会忽略评论。

Answer 2

就像Reiner说的那样，因为一旦切换页面，组件就会被破坏。尝试将路由器视图包装在keep-alive中：

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

另外。如果您想保留一个特定组件/页面的状态，可以使用include标记：

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

Vue.js中的Eventbus不会更新我的组件

2 个答案: