Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
在src/assets目录下建立文件EventHandler.js，该文件的作用在于给同级组件之间传递事件
EventHandler.js代码：
|
1
2
|
import Vue from 'Vue';export default new Vue(); |
1，在Components目录下新建一个组件Brother1.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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中调用两个同级组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
