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

 更新时间:2021年09月24日 10:40:45   作者:SpringSir  
这篇文章主要介绍了Vue2与Vue3兄弟组件通讯bus的区别及用法,有需要的朋友可以借鉴参考下,希望可以有所帮助,祝大家多多进步早日升职加薪

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用法的资料请关注脚本之家其它相关文章!

相关文章

  • 关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version

    关于IDEA中的.VUE文件报错 Export declarations are not supported by cu

    这篇文章主要介绍了关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • 加速vue组件渲染之性能优化

    加速vue组件渲染之性能优化

    这篇文章主要介绍了加速vue组件渲染之性能优化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 10分钟快速上手VueRouter4.x教程

    10分钟快速上手VueRouter4.x教程

    Vue Router目前最新版本是4.X,本文主要主要介绍了10分钟快速上手VueRouter4.x教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 基于vue 开发中出现警告问题去除方法

    基于vue 开发中出现警告问题去除方法

    下面小编就为大家分享一篇基于vue 开发中出现警告问题去除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Vue-cli Eslint在vscode里代码自动格式化的方法

    Vue-cli Eslint在vscode里代码自动格式化的方法

    本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

    利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

    本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统,这个博客使用Vue做前端框架,Node+express做后端,数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能,需要的朋友可以参考学习。
    2017-04-04
  • vue之监听页面是否以到底部

    vue之监听页面是否以到底部

    这篇文章主要介绍了vue之监听页面是否以到底部问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 在Vue项目中使用自定义字体的操作步骤

    在Vue项目中使用自定义字体的操作步骤

    在项目中使用自定义字体可以提升页面的视觉效果,并确保在不同设备上的一致性,文中通过代码示例给出了具体的操作步骤,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-06-06
  • Vue中路由参数与查询参数传递对比解析

    Vue中路由参数与查询参数传递对比解析

    在Vue.js中,路由与导航不仅涉及页面切换,还包括了向页面传递参数和获取查询参数,这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下
    2023-08-08
  • vue.js项目中实用的小技巧汇总

    vue.js项目中实用的小技巧汇总

    这篇文章主要给大家介绍了关于vue.js项目中实用的小技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11

最新评论