Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
发布时间：2020-12-17 02:47:56 所属栏目：百科 来源：网络整理
导读：我们接着 继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js，该文件的作用在于给同级组件之间传递事件 EventHandler.js代码： 1，在Components目录下新建一个组件Brother1.vue Z国: ghostwu {{msg}}
|
我们接着 继续，本文我们讲解兄弟组件的通信，项目结构还是跟上文一样.在src/assets目录下建立文件EventHandler.js，该文件的作用在于给同级组件之间传递事件 EventHandler.js代码： 1，在Components目录下新建一个组件Brother1.vueZ国: ghostwu{{msg}}。通过EventHandler.$emit发送一个自定义事件myDefineEv 。通过mouted【相当于jquery的ready,原生js的onload】，这个是vue生命周期的钩子函数， 用于在页面加载完成之后执行代码，在这里就是接收RDefineEv事件( Brother2.vue定义的 ) 2，在Components目录下新建一个组件Brother2.vueR国:八嘎{{msg}}。点击按钮发送RDefineEv事件 。文档ready的时候，接收myDefineEv(Brother1.vue)出发的自定义事件 三、在App.vue中调用两个同级组件小结： 创建一个事件传递中心，例如EventHandler.js，用它作为传递消息的中介 在需要传值的组件中用EventHandler.$emit触发一个自定义事件，并传递参数 在需要接收数据的组件中用EventHandler.$on监听自定义事件，并在回调函数中处理传递过来的参数 以上这篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |