Detailed explanation of the JS front-end attack Eventbus implementation update example

introduction

I recently reviewed the company's project and have never done a related Eventbus case implementation before. This article briefly introduces how each part is implemented. The implementation method is relatively simple and is mainly divided into three steps, namely global mount, registration, and triggering of registration events.

Global registration

When newVue is used, our eventbus needs to be mounted. The mount method is as follows. Newvue contains the methods that need to be used. The registration of eventbus needs to be instantiated in the beforeCreate hook. Here we bind eventbus on the prototype of vue. We pass this on, and then the registration of eventbus is completed.

new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
    beforeCreate() {
         = this;
    },
}).$mount('#app');

Register Ebus Events

EventBus appears in order to solve the communication problem between different components, so our registration event and triggering event need to be in different places. If it is communication between ordinary parent-child components, there is no need to use the Ebus function.

We are on the flow pageflow-refresh-idRegistering events for the event, we can see here that the author registers a dynamic event. The accuracy of calling the same event between different ids can be distinguished by dynamically adding events. The registration method can register multiple listening events. The registration here is an event that creates a node, and the specific functions will not be explained here.

//
let vm = this
.$on(`flow-refresh-${}`, (flowNewNodeData) => {
    (flowNewNodeData);
});

Trigger Ebus event

After registering the event on the page, we can call the registered event on other pages..$emitThe method to trigger the registered event on the page.

//
let vm = this
 .$emit(
    `flow-refresh-${}`,
    
);

This article simply records the entire implementation process of implementing Ebus, from global registration of Ebus plug-in to page registration listening events, and another page triggers the implementation of registration of other pages.

The above is the detailed explanation of the JS front-end eventbus implementation update example. For more information about the update of JS front-end Eventbus, please pay attention to my other related articles!