我們接著上文繼續，本文我們講解兄弟組件的通信，項目結構還是跟上文一樣.
在src/assets目錄下建立文件EventHandler.js，該文件的作用在于給同級組件之間傳遞事件
EventHandler.js代碼：
import Vue from 'Vue';export default new Vue();
1，在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監聽自定義事件，并在回調函數中處理傳遞過來的參數
以上這篇Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
