The Difference and Usage of Vue2 and Vue3 Brother Component Communication bus

Directory vue2.xvue3.xtiny-emitter Plug-in Usage mitt Plug-in Usage

vue2.x

Vue.prototype.$bus=new Vue() Listening: this. $bus. $on ('Method Name', (Parameter) = > {}), which can be accumulated Trigger: this. $bus. $emit ('method name ', argument value) Destroy: this. $bus. $off ('Method Name'), who listens and who destroys Note: Because listening can be accumulated, there must be step 4 destruction

vue3.x

tiny-emitter plug-in usage

Install plug-ins npm i tiny-emitter

Import using

import emitter from 'tiny-emitter/instance'

import {onMounted} from 'vue'

setup(){
       onMounted(()=>{
      		 Monitor:    emitter.on(' The name of the method to listen to ',( Parameter )=>{ Callback function })
      		 Trigger:    emitter.emit(' The name of the method to listen to ' , parameter )
      		 Destroy:    emitter.off(' The name of the method to listen to ' , parameter )
       }) 
}
	    

mitt plug-in usage

1. Install npm i mitt

2. Import using

import mitt from 'mitt'

Listening: bus. on ('Listening method name', (parameter) = > {Callback function})

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

Destroy: bus. off ('Listening method name', parameter)

The above is Vue2 and Vue3 brother component communication bus difference and usage details, more about Vue2 and Vue3 brother component communication bus usage information please pay attention to other related articles on this site!