VueJS中的EventBus不起作用

我嘗試瞭解eventBus，併爲此Hello.vue和User.vue創建了2個組件。VueJS中的EventBus不起作用

你好

<template> 
    <button @click="emitGlobalClickEvent()">Click me</button> 
</template> 


<script> 
import { eventBus } from '../main' 
export default { 
    name: 'hello', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    }, 
    methods: { 
    emitGlobalClickEvent() { 
     eventBus.$emit('messageSelected', this.msg) 
    } 
    } 
} 
</script>

用戶

import { eventBus } from '../main'; 

eventBus.$on('messageSelected', msg => { 
    console.log(msg); 
})

主要

import Vue from 'vue' 
import App from './App' 
import router from './router' 

export const eventBus = new Vue() 

Vue.config.productionTip = false 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
})

當我按一下按鈕我沒有看到在控制檯日誌中任何東西，我不明白任何錯誤。

我做錯了什麼或者我必須添加其他的東西來工作嗎？

來源

2017-07-20 John Smith

您的用戶是否在某處加載？您需要加載主要用戶和用戶才能激活偵聽器。 – Antony

我應該在哪裏加載它，因爲我不明白？ –

是'用戶'一個vue文件嗎？ – Ikbel

我看到你的代碼不完整。這就是爲什麼當你點擊按鈕時你看不到任何東西。

我希望我的代碼能夠幫助您理解EventBus以及您在代碼中犯的錯誤。

試試這個代碼： Hello.vue

<template> 
    <div> 
    <h2>This is Hello component</h2> 
    <button 
     @click="emitGlobalClickEvent()">Click me</button> 
    </div> 
</template> 
<script> 
import { eventBus } from '../main' 
export default { 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    }, 
    methods: { 
    emitGlobalClickEvent() { 
     eventBus.$emit('messageSelected', this.msg) 
    } 
    } 
} 
</script>

User.vue

<template> 
    <div> 
    <h2>This is User component</h2> 
    <user-one></user-one> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    import UserOne from './UserOne.vue' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log(msg) 
     }) 
    }, 
    components: { 
     UserOne 
    } 
    } 
</script>

UserOne.vue

<template> 
    <div> 
     <h3>We are in UserOne component</h3> 
     <user-two></user-two> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    import UserTwo from './UserTwo.vue' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log('From UserOne message !!!') 
     }) 
    }, 
    components: { 
     'user-two': UserTwo 
    } 
    } 
</script>

UserTwo.vue

<template> 
    <div> 
    <h4>We are in UserTwo Child component</h4> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log('From UserTwo message!') 
     }) 
    } 
    } 
</script>

我在控制檯中創建了一條不同的消息，以查看所有組件的差異，但是如果將msg放在所有$ on上，則在控制檯中，您將得到相同的消息。

來源

2017-07-20 17:47:42 dragon

VueJS中的EventBus不起作用

回答

相關問題