Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)

前端之家收集整理的这篇文章主要介绍了Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们接着

继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样.

在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件

EventHandler.js代码

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同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的Vue相关文章