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

2017-09-14 08:04:02来源:cnblogs.com作者:ghostwu人点击

分享

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

在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       Brother216     }17   }18 </script>

小结:

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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台