Home  >  Article  >  Web Front-end  >  Analysis of eventbus in Vue

Analysis of eventbus in Vue

不言
不言Original
2018-07-13 17:16:582295browse

This article mainly introduces the analysis of eventbus in Vue, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Without further ado, let’s get straight to the practical stuff

Existing pain points

  • Do you just want to simply publish and subscribe to an event to notify the sibling component to execute a method?

  • Are you still having a headache because you have to manually call uninstall (off) every time after introducing an eventbus?

  • Are you still thinking about a series of methods of [pub, sub], [$on, $emit], [fire, listen] balabala for various buses? Having a headache due to the name?

If the above is your pain point, then today you start your happy days using Vue:

vue-event-proxy

Pass At the minimum cost, your Vue supports global events. With it, you only need to add the
global: prefix to complete global event publishing when you need to make global notifications. Is it simple?

    this.$emit('global:你的事件名字');

There is a release, but what about monitoring? How about

    this.$on('global:你的事件名字', () => {});

? Is there no change except adding global: in front of the event name? If you don’t understand this part of Vue, I have prepared it for you, the official document.

How to use

$ npm install --save vue-event-proxy

Add in the main entrance of your project (main.js generated by vue-cli):

  import EventProxy from 'vue-event-proxy';
  Vue.use(EventProxy);

Next, use it to your heart's content.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Implementation principles of Debounce function and Throttle function

The above is the detailed content of Analysis of eventbus in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn