Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use eventBus in Vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to use eventBus in Vue.

1. Brief introduction

The common Vue components are: parent-child component communication, sibling component communication. Parent-child component communication is simple. The parent component passes data down to the child component through props, and when the child component has something to tell the parent component, it tells the parent component through the $emit event.

Today, let's talk about how to communicate if there is no introduction or introduction relationship between the two pages.

If your application does not need a library like Vuex to handle data communication between components, consider the event bus in Vue, or eventBus, to communicate.

EventBus is also known as event bus. In Vue, eventBus can be used as a bridge concept, just as all components share the same event center, which can be registered to send or receive events, so components can notify other components up and down in parallel. But it is too convenient, so if it is used carelessly, it will cause a "disaster" that is difficult to maintain, so we need a more perfect Vuex as the state management center to raise the concept of notification to the shared state level.

two。 Use

You can declare a global variable to use the event center, but if you are using a modular system such as webpack, this is obviously not appropriate.

It is also inconvenient to manually import every time you use it, so this article uses the vue-bus plug-in.

Vue-bus npm address

Vue-bus github address

Installation and introduction of npm install vue-bus-save

If you use it in a modular project, you must explicitly install vue-bus through Vue.use ():

/ / main.jsimport Vue from 'vue';import VueBus from' vue-bus';Vue.use (VueBus); used in components

Suppose there are two Vue components that need to communicate, and a click event is tied to the button of component A to send a message to component B.

/ / A component triggers export default {data () {return {Amsg:' I am the message from A component',}}, methods: {sendMsg () {this.$bus.emit ('changeMsg', this.Amsg); this.$bus.emit (' doOnce',' I will only trigger once') }}, / / B component {{Bmsg}} export default {data () {return {Bmsg:' I am component B',}}, methods: {getMsg (msg) {this.Bmsg = msg; console.log (msg);}}, created () {/ * * receive events * this also reflects that component A calls methods in component B. If you are only passing data, you can refer to the following simplified writing: * this.$bus.on ('changeMsg', (msg) = > {this.Bmsg = msg}); * / this.$bus.on (' changeMsg', this.getMsg); / / this listener will only trigger this.$bus.once once ('doOnce', (txt) = > {console.log (txt)}) }, / / remove EventBus event listener beforeDestroy () {this.$bus.off ('changeMsg', this.addTodo);},} when the component is destroyed

When we click the trigger button five times, the effect is as follows:

Add: remove listening events

To prevent events from being triggered repeatedly when listening, it is usually necessary to remove event listeners when the page is destroyed. Or during the development process, due to hot updates, events may be bound to listen multiple times, and event listeners need to be removed.

/ / this.$EventBus.$off ('eventName') when the mode of use is defined; / / when the mode of use is defined, EventBus.$off (' eventName'). At this point, I believe you have a better understanding of "how to use eventBus in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.