vue単一イベントセンター管理コンポーネント通信

vue転送データにはよく知られている方法があり、コンポーネント間でパラメータを転送し、親を構築し、コンポーネント情報を親に転送し、propsで継承することができます.これはprops転送です.
今日は単一イベント管理通信について話していますが、これは簡単にパラメータの問題を解決することができます.
これをするにはまず空のインスタンスオブジェクトを準備しなければなりません.なぜ準備するのか.空のオブジェクトを準備すると、この空のオブジェクトにはいろいろな方法が掛けられます.$onとか、$emitとか、この空のオブジェクトは必ずグローバルになります.なぜですか.各コンポーネントがアクセスするので、まずグローバルに空のインスタンスオブジェクトを定義します.基本的な構文フォーマットは次のとおりです.

var Event=new Vue();

Event.$emit(    ,   )

Event.$on(    ,function(data){
	//data
}.bind(this));//     this       ，  bind  ，   _this  this    

インスタンスコード:

    
    
    
    
    
    
        //          
        var Event=new Vue();


        var A={
            template:`
                <div>
                    <span>  A  </span> -> 
                    <ul v-for="(k,v) in a">
                        <li>{{k}}</li>
                    </ul>
                    <input type="button" value=" A   C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);
                }
            },
            data(){
                return {
                    a:{
                        a:'nihao',
                        b:'ni bu hao'
                    }
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>  B  </span> -> {{a}}
                    <input type="button" value=" B   C">
                </div>
            `,
            data(){
                return {
                    a:'  b  '
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>  C  </h3>
                    <span>     A    : {{a}}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){
                //var _this=this;
                Event.$on('a-msg',function(res){
                    this.a=res;
                }.bind(this));
            }
        };


        window.onload=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };