[js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程

我们接着上文继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样.

在src/assets目录下建立文件EventHandler.js，该文件的作用在于给同级组件之间传递事件

EventHandler.js代码:

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

2，在Components目录下新建一个组件Brother1.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>

。通过EventHandler.$emit发送一个自定义事件myDefineEv

。通过mouted【相当于jquery的ready, 原生js的onload】，这个是vue生命周期的钩子函数， 用于在页面加载完成之后执行代码，在这里就是接收RDefineEv事件( Brother2.vue定义的 )

2，在Components目录下新建一个组件Brother2.vue

 <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>

。点击按钮发送RDefineEv事件

。文档ready的时候，接收myDefineEv(Brother1.vue)出发的自定义事件

三、在App.vue中调用两个同级组件

 <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>

小结:

• 创建一个事件传递中心，例如EventHandler.js，用它作为传递消息的中介
• 在需要传值的组件中用EventHandler.$emit触发一个自定义事件，并传递参数
• 在需要接收数据的组件中用EventHandler.$on监听自定义事件，并在回调函数中处理传递过来的参数