SoFunction
Updated on 2025-04-05

vue bus global event center simple demo explanation

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

 npm install vue-bus

2. Register globally in the entry file

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

3. Pass data:

this.$("eventName",data)

4. Receive data:

this.$("eventName",data)

5. Things to note

The scope of this should point to the current vm instance. On listening events are generally placed in created or mounted in the component lifecycle function. Logging out the bus requires it in beforeDestroy;

Regarding the problem of bus event being triggered multiple times, on the one hand, it may be that the vue component is reused, resulting in a bus event being repeatedly registered, destroying the "same event name" bus, and the unique corresponding relationship between sending and receiving;

On the other hand, when the page is routed, the bus event in the original page has not been cancelled and is still hidden in the program.

Summarize

The above is a detailed explanation of the vue bus global event center introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!