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

目录

• 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.导入使用

import mitt from ‘mitt'

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

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

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

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

您可能感兴趣的文章:

• vue2.* element tabs tab-pane 动态加载组件操作
• vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
• vue2.0+SVG实现音乐播放圆形进度条组件
• vue2 拖动排序 vuedraggable组件的实现
• Vue2.x通用编辑组件的封装及应用详解
• Vue2.x通用条件搜索组件的封装及应用详解
• Vue2.0实现组件之间数据交互和通信操作示例
• 详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
• 在vue2.0中引用element-ui组件库的方法
• Vue2 的12种组件通讯

本文由 华域联盟 原创撰写：华域联盟 » Vue2与Vue3兄弟组件通讯bus的区别及用法

转载请保留出处和原文链接：https://www.cnhackhy.com/82160.htm