vue2.0通信基础教程VUECLI+WebPACK水平分量之间（推荐）

我们继续。本文解释了兄弟组件的通信，其项目结构与前一个组件相同。

在src /资产目录、文件eventhandler.js是创造，这是负责同级组件之间传递事件

eventhandler.js代码：
进口Vue from'vue；
出口新的Vue（默认）；
1、零件目录下创建一个新的组件brother1.vue

z国：ghostwu

{ } }
进口的EventHandler /资产/ EventHandler JS；
出口默认{
数据（）{
返回{
味精：' '
}
}，
方法：{
发送（）{
EventHandler。美元（'mydefineev发射，ghostwu发射原子弹的岛国）；
}
}，
挂载（）{
让_this =这；
EventHandler。美元（rdefineev
_this.msg = data;
}）；
}
}
通过发送一个自定义事件mydefineev EventHandler美元发出。

通过安装{相当于jQuery的准备，原生js }载，这是Vue公司生命周期的钩子函数，用于页面加载完成后执行代码。这里是rdefineev事件（brother2.vue定义）。

2、零件目录下创建一个新的组件brother2.vue

r国家：八GA
{ } }

进口的EventHandler /资产/ EventHandler JS；
出口默认{
数据（）{
返回{
味精：' '
}
}，
方法：{
防御（）{
EventHandler。美元（'rdefineev发射，国岛采用了高科技的反原子弹系统）；
}
}，
挂载（）{
让_this =这；
EventHandler。美元（mydefineev
_this.msg =数据；
}）；
}
}
。点击按钮发送rdefineev事件

文件准备，并接收自定义事件从mydefineev（brother1。VUE）

三。App.vue两级组件调用


进口brother1 '。 / / brother1 Vue的成分；
进口brother2 '。 / / brother2 Vue的成分；

出口默认{
组成：{
brother1，
brother2
}
}
总结：

创建一个事件交付中心，如eventhandler.js，作为传递消息的中介

使用EventHandler。$发出触发的一个组成部分，需要通过值传递参数自定义事件

监控自定义事件与EventHandler。美元在需要接收数据并在回调函数中传递的参数的组件

以上vue2.0通信教程基于Vue CLI + WebPACK的同行组成是由萧边推荐。我们希望能给你一个参考，希望你能支持它。