Vue.jsのグローバルイベントバスと通知

Question

2つのコンポーネントParent-Childが互いに通信できるようにグローバルイベントバスを作成しようとしています。私は周りを探索した。私はThe Global Event Busの良いパターンに関する多くの記事を読んだことがありますが、私の状況に対する解決策は見つけられません。私は自分のアプリケーションに通知機能を追加したいと思います。 Event.js

import Vue from 'vue'; 

export default new Vue({ 
methods: { 
    notifySuccess(message) { 
     this.$emit('notify', 'success', message); 
    }, 

    notifyInfo(message) { 
     this.$emit('notify', 'info', message); 
    }, 

    notifyWarning(message) { 
     this.$emit('notify', 'warning', message); 
    }, 

    notifyDanger(message) { 
     this.$emit('notify', 'danger', message); 
    }, 

    requestError(error) { 
     if (error.response) { 
      this.notifyDanger(error.response.status + ': ' + error.response.statusText); 
     } 
    }, 
}, 
}); 

親コンポーネントがこの

App.vue

<template> 
    <router-view></router-view> 
</template> 

<script> 
    import Event from './js/event.js'; 

    export default { 
     name: 'app', 
     created() { 
      Event.$on('notify', (type, message) => alert(`${type}\n${message}`)); 
     } 
    } 
</script> 

のように見えます

：これは、さまざまな通知のタイプがあるファイルevent.jsです

子コンポーネントは次のようになります

Header.vue

<template> 
    <a class="navbar-brand" href="#" @click.prevent="clickTest"></a> 
</template> 

<script> 
    name: 'header', 
    methods: { 
     clickTest() { 
      Event.$emit('notify', 'success', 'Hello World!'); 
      } 
    } 
</script> 

私はnotifySuccessは黄色でnotifyWarning、赤色に緑色、notifyDangerのポップアップが表示され、例えば、将来のポップアップに追加します。

子コンポーネントでイベント/メソッドを作成するにはどうすればいいですか？私は間違って何をしていますか？

PS：私の悪い英語を申し訳ありません。あなたが私を理解してくれるといいなあ

Answer 1

（あなたがEvent.jsのメソッドを定義したが、それらを使用していなかった）Event.notifySuccess('Hello World');で
をEvent.$emit('notify', 'success', 'Hello World!');を交換し、コンポーネントIDとして組み込みまたは予約済みのHTML要素を使用して回避しよう（headerのような）
次に、あなたのコードがなくても動作します何の問題。
updated demoを参照してください。