The difference and usage of Vue2 and Vue3 brother component communication bus

vue2.x

1. Vue.prototype.$bus = new Vue()
2. Listening: this.$bus.$on('method name', (parameters) => {}), it can be accumulated
3. Trigger: this.$bus.$emit('method name', actual parameter value)
4. Destroy: this.$bus.$off('method name'), whoever listens will destroy it
5. Note: Since monitoring can be accumulated, a fourth step of destruction is required

vue3.x

tiny-emitter plugin usage

Install the plugin npm i tiny-emitter

Import and use

import emitter from 'tiny-emitter/instance'

import { onMounted } from 'vue'

setup(){
       onMounted(()=>{
      		Monitoring: emitter.on('Monitoring method name', (parameters) => {callback function})
      		Trigger: emitter.emit('listening method name', parameters)
      		Destruction: emitter.off('listening method name', parameter)
       }) 
}
	    

Mitt plugin usage

1. Install npm install

2. Import and use

import mitt from 'mitt'

Monitoring: bus.on('Monitoring method name', (parameters) => {callback function})

Trigger: bus.emit('listening method name', parameter)

Destruction: bus.off('listening method name', parameter)

The above is the difference and usage of the communication bus between Vue2 and Vue3 brother components. For more information about the usage of the communication bus between Vue2 and Vue3 brother components, please pay attention to other related articles on 123WORDPRESS.COM!