Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)

import Vue from 'Vue';
export default new Vue();

<template>
 <div>
  <h3>Z国: ghostwu</h3>
  <input v-on:click="send" type="button" value="发送">
  <p>{{msg}}</p>
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
  data(){
   return {
    msg : ''
   }
  },
  methods : {
   send(){
    EventHandler.$emit( 'myDefineEv', "ghostwu向岛国发射了一颗原子弹" );
   }
  },
  mounted (){
   let _this = this;
   EventHandler.$on( "RDefineEv", function( data ){
    _this.msg = data;
   } );
  }
 }
</script>

<template>
 <div>
  <h3>R国:八嘎</h3>
  {{msg}}
  <input v-on:click="defend" type="button" value="防御">
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
  data(){
   return {
    msg : ''
   }
  },
  methods : {
   defend(){
     EventHandler.$emit( 'RDefineEv', "岛国采用了高科技反原子弹系统" );
   }
  },
  mounted(){
   let _this = this;
   EventHandler.$on( "myDefineEv", function( data ){
    _this.msg = data;
   } );
  }
 }
</script>

<template>
 <div id="app">
 <Brother1></Brother1>
 <Brother2></Brother2>
 </div>
</template>

<script>
 import Brother1 from './components/Brother1.vue';
 import Brother2 from './components/Brother2.vue';

 export default {
 components : {
  Brother1,
  Brother2
 }
 }
</script>