[js高手之路]Vue2.0基於vue-cli+webpack同級組件之間的通信教程

我們接著上文繼續，本文我們講解兄弟組件的通信，項目結構還是跟上文一樣.

在src/assets目錄下建立文件EventHandler.js，該文件的作用在於給同級組件之間傳遞事件

EventHandler.js代碼:

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

2，在Components目錄下新建一個組件Brother1.vue

 1 <template>
 2     <div>
 3         <h3>Z國: ghostwu</h3>
 4         <input v-on:click="send" type="button" value="發送">
 5         <p>{{msg}}</p>
 6     </div>
 7 </template>
 8 <script>
 9     import EventHandler from '../assets/EventHandler.js';
10     export default {
11         data(){
12             return {
13                 msg : ''
14             }
15         },
16         methods : {
17             send(){
18                 EventHandler.$emit( 'myDefineEv', "ghostwu向島國發射了一顆原子彈" );
19             }
20         },
21         mounted (){
22             let _this = this;
23             EventHandler.$on( "RDefineEv", function( data ){
24                 _this.msg = data;
25             } );
26         }
27     }
28 </script>

。通過EventHandler.$emit發送一個自定義事件myDefineEv

。通過mouted【相當於jquery的ready, 原生js的onload】，這個是vue生命周期的鉤子函數， 用於在頁面載入完成之後執行代碼，在這裡就是接收RDefineEv事件( Brother2.vue定義的 )

2，在Components目錄下新建一個組件Brother2.vue

 1 <template>
 2     <div>
 3         <h3>R國:八嘎</h3>
 4         {{msg}}
 5         <input v-on:click="defend" type="button" value="防禦">
 6     </div>
 7 </template>
 8 <script>
 9     import EventHandler from '../assets/EventHandler.js';
10     export default {
11         data(){
12             return {
13                 msg : ''
14             }
15         },
16         methods : {
17             defend(){
18                  EventHandler.$emit( 'RDefineEv', "島國採用了高科技反原子彈系統" );
19             }
20         },
21         mounted(){
22             let _this = this;
23             EventHandler.$on( "myDefineEv", function( data ){
24                 _this.msg = data;
25             } );
26         }
27     }
28 </script>

。點擊按鈕發送RDefineEv事件

。文檔ready的時候，接收myDefineEv(Brother1.vue)出發的自定義事件

三、在App.vue中調用兩個同級組件

 1 <template>
 2   <div id="app">
 3     <Brother1></Brother1>
 4     <Brother2></Brother2>
 5   </div>
 6 </template>
 7 
 8 <script>
 9   import Brother1 from './components/Brother1.vue';
10   import Brother2 from './components/Brother2.vue';
11 
12   export default {
13     components : {
14       Brother1,
15       Brother2
16     }
17   }
18 </script>

小結:

• 創建一個事件傳遞中心，例如EventHandler.js，用它作為傳遞消息的中介
• 在需要傳值的組件中用EventHandler.$emit觸發一個自定義事件，並傳遞參數
• 在需要接收數據的組件中用EventHandler.$on監聽自定義事件，併在回調函數中處理傳遞過來的參數