JS前端攻坚Eventbus实现更新示例详解
更新时间：2022年12月14日 16:07:25 作者：一只大加号
这篇文章主要为大家介绍了JS前端攻坚Eventbus实现更新示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
最近复盘了一下公司的项目，之前一直没有做过相关的Eventbus的案例实现，这篇文章大概简要的介绍一下各个部分是如何实现的，实现的方法比较简单，主要分为三个步骤，分别是全局挂载，注册，以及注册事件的触发。
全局注册
在newVue的时候需要对我们的eventbus进行挂载，挂载方式如下，newvue中包含了需要用到的方法，eventbus的注册需要在beforeCreate钩子中进行实例化，在这里我们的对eventbus在vue的原型上进行绑定，我们将this传入到Vue.prototype.eventBus上，那么eventbus的注册就已经是完成了。
new Vue({
router,
store,
i18n,
render: h => h(App),
beforeCreate() {
Vue.prototype.eventBus = this;
},
}).$mount('#app');
注册Ebus事件
EventBus的出现本身就是为了解决不同组件之间的通信问题，所以我们的注册事件和触发事件需要在不同的地方，如果是普通的父子组件之间的通信的话就没有必要用到Ebus的功能了
我们在flow页面对flow-refresh-id的事件进行注册，在这里可以看出笔者注册的是动态的一个事件，通过动态添加事件的方法可以区分出不同id之间调用相同事件的准确性，一次注册写法可以注册出多个监听事件，这里注册的是一个创建节点的事件，具体的功能这里就不做讲解了。
//flow.vue
let vm = this
vm.eventBus.$on(`flow-refresh-${vm.obj.id}`, (flowNewNodeData) => {
vm.createNewNode(flowNewNodeData);
});
触发Ebus事件
在flow.vue页面注册好事件之后我们就可以在其他页面调用注册的事件了，通过vm.eventBus.$emit的方法在dataD.vue页面来触发已经注册好的事件。
//dataD.vue
let vm = this
vm.eventBus.$emit(
`flow-refresh-${this.menuActive.businessId}`,
vm.flowNewNodeData
);
本文只是简单的记录一下实现Ebus的一整个实现过程，从全局注册Ebus插件，再到页面注册监听事件，另外一个页面触发其他页面注册的实现。
以上就是JS前端攻坚Eventbus实现更新示例详解的详细内容，更多关于JS前端Eventbus更新的资料请关注脚本之家其它相关文章！
相关文章
树形图可视化广泛用于分层数据分析。如果你没有经验还想创建一个，那将会有些复杂。下面是一个详细教程，教你如何使用JavaScript创建交互式树形图2022-06-06
第二次聊一聊JS require.js模块化工具的基础知识，本文为大家JS require.js模块化工具的最基本知识点，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了javascript实现发送短信验证码案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了JS+CSS实现网页加载中的动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
Javascript中类式继承和原型式继承的实现方法和区别之处
其它的面向对象程序设计语言都是通过关键字来解决继承的问题。但是javascript中并没有定义这种实现的机制。接下来通过本文给大家介绍Javascript中类式继承和原型式继承的实现方法和区别,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了js实现省市区三级联动非select下拉框版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
今天开发的时候，遇到要点击缩略图之后居中显示图片的大图查看（大致效果如上图所示）~想了好几种实现方式,下面通过本文给大家分享JS点击缩略图整屏居中放大图片效果，需要的朋友参考下吧2017-07-07
这篇文章主要介绍了亲自教你TypeScript 项目搭建过程,我记得前一天，我们配置过一份 webpack 配置，直接复制过来使用，这里就不多说了，然后就是在项目中引入我们的 less，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了通过Kettle自定义jar包供javascript使用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
ES6：全称ECMAScript 6.0，是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。今天我们就来学习一下ES6的Set集合的使用2023-02-02
最新评论