Vue.js中的事件总线没有更新我的组件

我有两个组件，我想显示用户在另一个组件上输入的内容。我真的不希望使用状态管理器一样vuex，因为它可能是一个有点矫枉过正，因为它是一个小的应用程序Vue.js中的事件总线没有更新我的组件

这是我main.js：发出呼吁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) 
})

组件。 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 }}不会更新到用户输入的内容，当我单击回组件以查看它是否已更新时，它只会保留空白？有任何想法吗？

来源

2017-09-01 Opt3

也许它就像莱纳说，因为组件被破坏：如果你想保持只有一个特定的组件/页的状态，你可以使用include标签。尝试将'router-view'封装在'keep-alive'内：'。 https://vuejs.org/v2/guide/components.html#keep-alive –

神奇的做到了这一点，它的工作原理，它每次都被破坏并被重置！谢谢，如果你将它作为答案发布，我会将其标记为正确 – Opt3

就像Reiner说的那样，因为一旦切换页面组件就会被破坏。尝试将您的路由器视图包含在保持活动状态中：

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

另外。如果您切换页面

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

来源

2017-09-01 12:26:24

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

来源

2017-09-01 11:13:54 Reiner

你是对的，它每次都会重置，谢谢！只是围绕着围绕着，它的工作 – Opt3

;）当你点击“返回到组件上查看它是否被更新”是一个提示 – Reiner

Vue.js中的事件总线没有更新我的组件

回答

相关问题