刚学的vue.js的单一事件管理组件通信

第一次在博客园写的技术分享，写的不好的话各位大神多体谅，好啦进入主题

说说思路

首先

第一步，准备一个空的示例对象

var Event=new Vue();

第二步，准备发送的数据

Event.$emit(事件名称,数据)

第三步，接收数据

Event.$on(事件名称，function(data){
// data
}.bind(this))；

具体代码实现效果如下；

var Event = new Vue();
            var A={
                template:`<div>
                    <span>我是A组件</span>-->{{a}}
                    <input type='button' value='把A数据给C' @click="send">
                </div>`,
                methods:{
                    send(){
                        Event.$emit('a-msg',this.a);
                    }
                },
                data(){
                    return {
                        a:'我是A数据'
                    }
                }
            };
            var B={
                template:`<div>
                    <span>我是B组件</span>-->{{b}}
                    <input type='button' value='把B数据给C' @click='send'>
                </div>`,
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b)
                    }
                },
                data(){
                    return {
                        b:'我是B数据'
                    }
                }
            };
            var C={
                template:`<div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A数据为:{{a}}</span></br>
                    <span>接收过来的B数据为:{{b}}</span>
                </div>`,
                data(){
                    return {
                        a:'',
                        b:''
                    }
                },
                mounted(){
                    var _this=this;
                    //接收A组件的数据
                    Event.$on('a-msg',function(a){
                        _this.a= a;
                    });
//                    另一种使用this方法
//                    Event.$on('a-msg',function(a){
//                        this.a= a;
//                    }.bind(this));
                    //接收B的数据
                    Event.$on('b-msg',function(b){
                        _this.b= b;
                    });
                }
            };
            window.onload = function(){
                new Vue({
                    el:'#box',
                    components:{
                        'com-a':A,
                        'com-b':B,
                        'com-c':C
                    }
                })
            }

html部分

        <div id="box">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>
        </div>