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中prototype属性的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要给大家介绍了关于如何利用js根据坐标判断构成单个多边形是否合法的相关资料,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了浅谈Webpack多页应用HMR卡住问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
TensorFlow.js是一个开源的基于硬件加速的JavaScript库，用于训练和部署机器学习模型。本教程将会带大家简单了解和使用TensorFlow.js框架实现预测鸢尾花种类2022-11-11
这篇文章主要为大家详细介绍了微信小程序实现3D轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Some tips of wmi scripting in jscript (1)
Some tips of wmi scripting in jscript (1)...2007-04-04
本文通过案例给大家介绍了JavaScript fetch接口,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
webpack中的filename 和 chunkFilename 的区别实例解析
filename 指列在 entry 中,打包后输出的文件的名称,chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称,这篇文章主要介绍了webpack中的filename 和 chunkFilename 的区别实例解析,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Bootstrap Scrollspy源码学习，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论