Vue event bus, Eventbus use

purpose of usage

Communication within the component is also transmitted data

Scope of application

The brothers component passes the value, the grandchildren component pass the value, and the component is called when all called components should be in response to some functions.

Use example

New JS file Eventbus.js
Content is a Vue instance

import Vue from 'vue'
export default new Vue()

If the global call, in main.js

import eventBus from './util/eventBus'
Vue.prototype.$bus = eventBus

Local call, introduce this file directly in the calling component

import bus from './../../util/eventBus.js'

How to use, pass

this.$bus.$emit('mapId', this.mapId)

Here, a data called Mapid is delivered globally, and his content is this.mapid.

Received at the use, Target is the content of this.mapid

this.$bus.$on('mapId', target=>{
	console.log(target)
})

Intelligent Recommendation

Vue event bus (EventBus) introduction

initialization Suppose you have two Vue pages that need to communicate: A and B. The A page binds a click event to the button, and sends a message to notify the B page. //Use emit to distribute in A U...

Vue Set Event Bus Eventbus

Some scenes use the Eventbus bus to make the code much simple. Step 1: Write an Eventbus class Step 2: Place the event bus in Vue, find the main.js file to join the following code The third step: is t...

What is Vue Event Bus (Eventbus)

1. Introduction of the event bus Vue components are very common with parent sub-component communication, brothers component communications. The parent subcomponent communication is very simple, and th...

Vue-based event bus Eventbus

...

Vue Transfer Event Bus Eventbus

There is a simple method between components in Vue. Create Even.js (name your own) The following is the code created in the JS file. There are two components of A, B, and JS that needs to be created i...