我们接着<强>上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样。
在src/资产目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件
EventHandler.js代码:
从“进口Vue Vue ';
出口默认新Vue ();
<强> 1,在组件目录下新建一个组件Brother1.vue
& lt; template>
& lt; div>
& lt; h4> Z国:ghostwu
& lt;输入v:点击="发送" type="按钮" value=" https://www.yisu.com/zixun/发送”在
& lt; p>{{味精}}& lt;/p>
& lt;/div>
& lt;/template>
& lt; script>
从“. ./资产/进口EventHandler EventHandler.js”;
出口默认{
数据(){
返回{
味精:“
}
}，
方法:{
send () {
EventHandler。美元发出(“myDefineEv”,“ghostwu向岛国发射了一颗原子弹”);
}
}，
安装(){
让_this=;
EventHandler。美元(“RDefineEv”功能(数据){
_this。味精=数据;
});
}
}
& lt;/script>
。通过EventHandler。美元发出发送一个自定义事件myDefineEv
。通过未安装【相当于jquery的准备,原生js的onload】,这个是vue生命周期的钩子函数,用于在页面加载完成之后执行代码,在这里就是接收RDefineEv事件(Brother2。vue定义的)
<强> 2,在组件目录下新建一个组件Brother2.vue
& lt; template>
& lt; div>
& lt; h4> R国:八嘎& lt;/h4>
{{味精}}
& lt;输入v:点击=昂次馈崩嘈?鞍磁ァ奔壑?" https://www.yisu.com/zixun/防御”比;
& lt;/div>
& lt;/template>
& lt; script>
从“. ./资产/进口EventHandler EventHandler.js”;
出口默认{
数据(){
返回{
味精:“
}
}，
方法:{
保护(){
EventHandler。美元发出(“RDefineEv”,“岛国采用了高科技反原子弹系统”);
}
}，
安装(){
让_this=;
EventHandler。美元(“myDefineEv”功能(数据){
_this。味精=数据;
});
}
}
& lt;/script>
。点击按钮发送RDefineEv事件
。文档准备的时候,接收myDefineEv (Brother1.vue)出发的自定义事件
& lt; template>
& lt; div id=坝τ谩北?
& lt; Brother1> & lt;/Brother1>
& lt; Brother2> & lt;/Brother2>
& lt;/div>
& lt;/template>
& lt; script>
从’。/组件/导入Brother1 Brother1.vue”;
从’。/组件/导入Brother2 Brother2.vue”;
出口默认{
组件:{
Brother1,
Brother2
}
}
& lt;/script>
创建一个事件传递中心,例如EventHandler.js,用它作为传递消息的中介
在需要传值的组件中用EventHandler。美元发出触发一个自定义事件,并传递参数
在需要接收数据的组件中用EventHandler。美元在监听自定义事件,并在回调函数中处理传递过来的参数
以上这篇Vue2.0基于vue-cli + webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
