VueJSのEventBusが動作しない

Question

私はeventBusについて学び、このHello.vueとUser.vueの2つのコンポーネントを作成しました。

こんにちは

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

私はボタンをクリックすると、私はコンソールログには何も表示されていないと私は得ることはありませんあらゆる誤り。

私は間違ったことをしましたか、あるいは何か他に働かなくてはなりませんか？

Answer 1

コードが不完全であることがわかりました。そのため、ボタンをクリックしても何も表示されません。

私のコードは、あなたが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> 

すべてのコンポーネントの違いを確認するために、コンソールに別のメッセージを作成しましたが、コンソールですべての$ onにmsgを入力すると、同じmsgが表示されます。