Detailed explanation of the use of bus in Vue

Vue bus mechanism (bus)

In addition to using vuex, communication between non-parent-child components in vue can also be done through the bus, and the two are applicable to different scenarios.

The bus is suitable for small projects and projects where data is used by fewer components. It is not suitable for medium and large projects where data is used among many components. Bus is actually a publish-subscribe model. It uses Vue's custom event mechanism to publish an event through $emit at the triggering location, and listens to the event through $on on the page that needs to be listened to.

Vuex is suitable for medium and large projects and situations where data is shared among multiple components.

Use of component communication bus

Create bus.js under the utils file

// utils - bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus

1. Passing Values

Send Message

import bus from '@/utils/bus'

The first parameter is the flag variable, and the second parameter is the communication value.

us.$emit('message', 'hello');

Receiving information

import bus from '@/utils/bus'

The first parameter is the flag variable, and the e in the second parameter is the communication value.

bus.$on('message', (e) => {
 console.log(e)
})

2. Calling method

One component (A) calls a method of another component (B)

Methods of component B

import bus from '@/utils/bus'
mounted () { 
 bus.$on('testA', this.testA) 
},
testA () {
 console.log('Called by component A')
}

A component call

import bus from '@/utils/bus'
mounted () {
 bus.$emit('testA')
}

This is the end of this article about the use of bus in Vue. For more relevant content on the use of vue bus, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!