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

<template>
 <div>
 <h3>Z國: ghostwu</h3>
 <input v-on:click="send" type="button" value="發(fā)送">
 <p>{{msg}}</p>
 </div>
</template>
<script>
 import EventHandler from '../assets/EventHandler.js';
 export default {
 data(){
 return {
 msg : ''
 }
 },
 methods : {
 send(){
 EventHandler.$emit( 'myDefineEv', "ghostwu向島國發(fā)射了一顆原子彈" );
 }
 },
 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', "島國采用了高科技反原子彈系統(tǒng)" );
 }
 },
 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>