Home > Web Front-end > JS Tutorial > Analysis of eventbus in Vue

Analysis of eventbus in Vue

不言
Release: 2018-07-13 17:16:58
Original
2341 people have browsed it

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:你的事件名字');
Copy after login

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

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

? 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
Copy after login

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

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

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template