好资源导航 » 文章资讯 » Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)

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

2023-09-24 18:45:06 54

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

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

EventHandler.js代码：

importVuefrom'Vue';
exportdefaultnewVue();

1，在Components目录下新建一个组件Brother1.vue

。通过EventHandler.$emit发送一个自定义事件myDefineEv

。通过mouted【相当于jquery的ready,原生js的onload】，这个是vue生命周期的钩子函数，用于在页面加载完成之后执行代码，在这里就是接收RDefineEv事件(Brother2.vue定义的)

2，在Components目录下新建一个组件Brother2.vue

。点击按钮发送RDefineEv事件

。文档ready的时候，接收myDefineEv(Brother1.vue)出发的自定义事件

三、在App.vue中调用两个同级组件

小结：

创建一个事件传递中心，例如EventHandler.js，用它作为传递消息的中介

在需要传值的组件中用EventHandler.$emit触发一个自定义事件，并传递参数

在需要接收数据的组件中用EventHandler.$on监听自定义事件，并在回调函数中处理传递过来的参数

以上这篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

Z国:ghostwu

R国:八嘎

随机推荐

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

Z国:ghostwu

R国:八嘎

热门推荐

随机推荐