Vue.jsのEventbusがコンポーネントを更新していません

Question

私は2つのコンポーネントを持っていて、ユーザーが入力した内容を他のコンポーネントに表示したいとします。 addHtmlというイベントを発する

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

コンポーネント：私は本当にそれはそれは小さなアプリケーション

これは私のmain.jsあるだと少しやり過ぎだろうだからvuexのような状態マネージャを使用する必要はありません。 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> 

イベントをリッスンし、ファイルが放出さthatsのと他のコンポーネントに入力されたものを表示するには：

<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 include='name of component'> 
    <router-view></router-view> 
</keep-alive> 

Answer 2

vue-routerを使用してsecoundコンポーネントを表示している場合。理由は、毎回コンポーネントの新しいインスタンスが表示され、コンポーネントが破棄されたときにtestの値がリセットされるためです。 test: window.yourApp.testを保持する（グローバル）変数にバインドすることができます。たぶんwebpackは嘆くだろうが、それは可能です。 eslintでもこのようなケースに対するコメントは無視されています。