Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
时间：2021-01-23 10:17:20|栏目：vue|点击： 次
我们接着上文继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样.
在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监听自定义事件，并在回调函数中处理传递过来的参数
上一篇：vue-cli与webpack处理静态资源的方法及webpack打包的坑
栏 目：vue
下一篇：Vue2.x Todo之自定义指令实现自动聚焦的方法
本文标题：Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
本文地址：http://www.codeinn.net/misctech/50055.html
