剛學的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>