12.平行组件通信

<div id="parallel">
    <first></first>
    <second></second>
</div>

var Event = new Vue();//事件调度器，将第一个组件里的first_say与第二个组件里的first_say绑定

Vue.component('first',{
    template:`
    <div>第一个人说:<input v-on:keyup="changed" v-model="first_say" ></div>
    `,
    methods:{
        changed:function(){
            //触发事件,第一个参数是事件名字，第二个是事件内容
            Event.$emit('first_words',this.first_say);
        }
    },
    data:function (){
        return{
            first_say: '',
        }
    }
});
Vue.component('second',{
    template:`
    <div>第二个人：第一个人说，{{first_say}}</div>
    `,
    data:function(){
        return {
            first_say:'',
        }
    },
    //mounted，初始化完成
    mounted:function () {
        //把this改成其他的，目的是要this指的是本组件，而不是Event
        var me=this;
        //$on，监听
        Event.$on('first_words',function (data) {
            console.log(data);
            me.first_say=data;
        })
    }
});
new Vue({
    el:'#parallel',
})