怎么用eventemitter2实现Vue组件通信

这篇文章主要讲解了“怎么用eventemitter2实现Vue组件通信”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用eventemitter2实现Vue组件通信”吧！概述
当两个组件之间没有任何父子关系时，利用Vue标准的props传值和emit触发事件无法解决他们之间通信的问题。最近做的项目使用的是eventemitter2，来实现不相关组件之间的通信。这篇文章分享的是我对eventemitter2使用的总结和体会。eventemitter2的npm文档大家可以看eventemitter2介绍。它是node.js提供的事件接口。安装如下模块的EventEmitter2属性是一个构造函数，可以生成eventemitter2实例。实例定义了绑定、触发、移除事件的方法。本文涉及到的实例方法有on，off，emit，removeAllListeners，更多方法，大家可以去npm文档自行学习。和其他事件处理机制一样，eventemitter2事件处理，必须包含三部分：
绑定事件 =》 触发事件 =》 移除事件本次分享，主要讨论在vue项目中使用eventemitter2：方法一：结合class模块化编程，对实例、事件名、绑定事件方法和移除事件方法做封装方法二：结合vue插件开发，全局添加事件实例方法一：结合class
开发步骤：添加模块 event_confg.js，用于存储eventEmitter2实例和事件名添加模块 event_manager.js，封装实例绑定事件的方法和移除事件的方法按照 绑定事件 =》 触发事件 =》 移除事件的步骤，使用eventeitter2第一步：创建 event_confg.js
第二步： 创建event_manager.js
此模块创建的是一个类，传入eventemitt免费云主机域名er2实例后，对实例的添加和移除事件的方法做了封装。
这里绑定和移除事件，分别用了on，off方法。第三步： 在组件中使用eventemitter2
绑定事件
同一个事件名，可以绑定多个事件回调，当事件被触发时，会顺序执行同名的回调函数触发事件
事件的触发和回调是同步执行的。用下面的方式触发事件后，执行的过程是：
打印 准备触发啦！ =》 执行回调 =》 执行 $message弹框移除事件
在beforeRouteLeave或者beforeDestory中移除事件
如果使用的是beforeRouteLeave注意调用它的next函数，让路由继续往下执行方法二：结合Vue插件开发
思路是，向顶层Vue对象添加全局的eventemitter2对象作为属性。
开发步骤：使用install创建emitter.js插件，在其中给Vue添加全局属性使用全局的Vue.use()方法，使用插件按照 绑定事件 =》 触发事件 =》 移除事件的步骤，使用eventeitter2第一步：创建全局变量
添加全局属性$emit_inst，存储实例；添加全局的$emit_name，存储事件名第二步：使用插件
在main.js中，new Vue()命令创建实例之前，调用Vue.use()方法，使用插件第三步：在组件中使用eventemitter2
绑定事件
这里使用的是，官方文档的on方法，传入eventName和回调，给实例绑事件，并定义回调函数。
同一个事件名，可以绑定多个事件回调，当事件被触发时，会顺序执行同名的回调函数触发事件
事件的触发和回调是同步执行的。执行过程，上面有说明。移除事件
直接在实例上移除事件时，使用removeAllListeners方便，因为只用传事件名。Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。感谢各位的阅读，以上就是“怎么用eventemitter2实现Vue组件通信”的内容了，经过本文的学习后，相信大家对怎么用eventemitter2实现Vue组件通信这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: JS使用Promise时常见的错误有哪些

本文小编为大家详细介绍“JS使用Promise时常见的错误有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“JS使用Promise时常见的错误有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。Promise 提供了一种优雅的方…