Bus global event center in vue (detailed tutorial)

ue-bus provides a global event center and injects it into each component. You can use global events as conveniently as using the built-in event stream. This article introduces you to a simple demo of the vue bus global event center. Friends who need it can refer to it

1. After vue-cli has built the project, use npm to install vue-bus

npm install vue-bus

2. Register globally in the entry file main.js

 import Vue from 'vue';
 import VueBus from 'vue-bus';
 Vue.use(VueBus);

3. Pass data :

this.$bus.emit("eventName",data)

4. Receive data:

this.$bus.on("eventName",data)

5. Notes

The scope of this should point to the current vm instance. The on listening event is generally placed in created or mounted in the component life cycle function. Unregistering the bus needs to be in beforeDestroy;

About bus event triggering On the one hand, it may be because the vue component is reused, causing a bus event to be registered repeatedly, destroying the "same event name" bus, the only corresponding relationship between sending and receiving;

On the other hand, page routing , the bus event in the original page has not been logged out, and is still hidden in the program.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

$set and array update methods in vue.js_vue.js

JQuery select select The value method of the selected component

vue is combined with vue-i18n to implement the multi-language switching method of background data

The above is the detailed content of Bus global event center in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!