Vue2与Vue3兄弟组件通讯bus的区别及用法

编辑: admin 分类: javascript 发布时间: 2021-11-17 来源:互联网
目录
  • vue2.x
  • vue3.x
    • tiny-emitter插件用法
    • mitt插件用法

vue2.x

  1. Vue.prototype.$bus=new Vue()
  2. 监听: this.$bus.$on(‘方法名',(参数)=>{}),它可以累加
  3. 触发: this.$bus.$emit(‘方法名',实参值)
  4. 销毁:this.$bus.$off(‘方法名'),谁监听谁销毁
  5. 注意: 由于监听可以累加, 所以必须要有第四步销毁

vue3.x

tiny-emitter插件用法

安装插件 npm i tiny-emitter

导入使用

import emitter from ‘tiny-emitter/instance'

import {onMounted} from ‘vue'

setup(){
       onMounted(()=>{
      		监听:   emitter.on('监听的方法名',(参数)=>{回调函数})
      		触发:   emitter.emit('监听的方法名',参数)
      		销毁:   emitter.off('监听的方法名',参数)
       }) 
}
	    

mitt插件用法

1.安装 npm i mitt

2.导入使用

日本服务器http://www.558idc.com/jap.html

import mitt from ‘mitt'

监听: bus.on(‘监听的方法名',(参数)=>{回调函数})

触发:bus.emit(‘监听的方法名',参数)

销毁: bus.off(‘监听的方法名',参数)

以上就是Vue2与Vue3兄弟组件通讯bus的区别及用法的详细内容,更多关于Vue2与Vue3兄弟组件通讯bus用法的资料请关注hwidc其它相关文章!