扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
我们接着上文继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样.
网站的建设创新互联建站专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都木屋等企业提供专业服务。
在src/assets目录下建立文件EventHandler.js，该文件的作用在于给同级组件之间传递事件
EventHandler.js代码：
import Vue from 'Vue'; export default new Vue();
1，在Components目录下新建一个组件Brother1.vue
Z国: ghostwu
{{msg}}
。通过EventHandler.$emit发送一个自定义事件myDefineEv
。通过mouted【相当于jquery的ready, 原生js的onload】，这个是vue生命周期的钩子函数， 用于在页面加载完成之后执行代码，在这里就是接收RDefineEv事件( Brother2.vue定义的 )
2，在Components目录下新建一个组件Brother2.vue
R国:八嘎
{{msg}}
。点击按钮发送RDefineEv事件
。文档ready的时候，接收myDefineEv(Brother1.vue)出发的自定义事件
三、在App.vue中调用两个同级组件
小结：
创建一个事件传递中心，例如EventHandler.js，用它作为传递消息的中介
在需要传值的组件中用EventHandler.$emit触发一个自定义事件，并传递参数
在需要接收数据的组件中用EventHandler.$on监听自定义事件，并在回调函数中处理传递过来的参数
以上这篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网