2番目のVueインスタンスを非親子通信用にインスタンス化するには

Question

私はVue 2.0のチュートリアルを勉強していますが、イベントバスを使用したコミュニケーションのレッスンを終えてすぐ親以外のコンポーネントとの通信が可能になりました。

チュートリアルで提示されたコードは私にエラーを与えましたが、私は以下で説明するようにそれを私自身で解決することができました。私はなぜ自分の学習と理解のために元のコードがうまくいかなかったのか理解したいと思います。次のように

チュートリアルで与えられたコードは次のとおりです。

Window.Event = new Vue(); 

Vue.component('coupon', { 

    template: '<input placeholder="Coupon Code" @blur="onCouponApplied">', 

    methods: { 
     onCouponApplied() { 
      Event.$emit('applied'); 
     } 
    } 
}); 

var app = new Vue({ 
    el: '#root', 

    created() { 
     Event.$on('applied',() => alert('Handling it!')); 
    } 
}); 

私が実行しようとしたとき、私はエラーを受け取りました：「例外TypeError：イベント$には関数ではありません」。オンライン調査した結果、私は単純に最初のVueインスタンスのインスタンス化を変更：

var bus = new Vue(); 

と、次のように続い/発するように呼ば：

bus.$emit('applied'); 

と

bus.$on('applied',() => alert('Handling it!')); 

の場合を私自身の理解、私は以下のいくつかの助けに感謝します：

1. 元のWindow.Event形式が私のために働いていないのはなぜですか？ 他の人のために働いていたのはなぜですか？
2. このチュートリアル のコメントセクションには、Window.Eventをベストプラクティスとして使用している行に沿って、 のコメントがありましたが、その理由を説明していませんでした。
3. 私がやったやり方に間違いがありますか？ 元の機能を使用しないと失うことになります。 Window.Event？

ありがとう！

Answer 1

チュートリアルでは、文字通り、彼らが悪い考えを推奨している、

window.Event = new Vue() 

をこの正確なラインを推奨している場合。 Eventはnative browser objectです。たとえそれを上書きできる場合でも、間違いないはずです。 Vue自体を含む多くの他のライブラリが依存するオブジェクトを置き換えることになります。

、他の一方で、あなたが実際にこのコード

Window.Event = new Vue() 

を書いたなら、あなたがお使いのブラウザでは何でもWindowにごVueのオブジェクトを追加しました。大文字のWに注意してください。 Windowはwindowと同じではありません。小文字のwindowは、すべてのブラウザのグローバルオブジェクトを参照します。クロムでは、Windowは何か他のものを指しています（正確にはどういうものかはわかりません）。

したがって、​​を呼び出そうとすると、上にリンクしたネイティブのイベントオブジェクトを参照していますが、作成しようとしたバスではなくエラーが発生します。