Vue2与Vue3兄弟组件通讯bus的区别及用法
vue2.x
- Vue.prototype.$bus=new Vue()
- 监听: this.$bus.$on(‘方法名',(参数)=>{}),它可以累加
- 触发: this.$bus.$emit(‘方法名',实参值)
- 销毁:this.$bus.$off(‘方法名'),谁监听谁销毁
- 注意: 由于监听可以累加, 所以必须要有第四步销毁
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用法的资料请关注脚本之家其它相关文章!
相关文章
关于IDEA中的.VUE文件报错 Export declarations are not supported by cu
这篇文章主要介绍了关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-10Vue-cli Eslint在vscode里代码自动格式化的方法
本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-02-02利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统,这个博客使用Vue做前端框架,Node+express做后端,数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能,需要的朋友可以参考学习。2017-04-04
最新评论