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用法的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue中组件通信的八种方式（值得收藏！）

    vue中组件通信的八种方式（值得收藏！）

    前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

  • vue 使用eventBus实现同级组件的通讯

    新创建一个vue实例用于调度事件的绑定和发送 可以做到同级组件相互通讯,传递参数,点击第一个组件会修改第二个组件的label值,点击第二个组件会修改第二个组件的label值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </hea

  • vue2.0s中eventBus实现兄弟组件通信的示例代码

    vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是

  • Vue中bus的使用详解

    vue总线机制(bus) vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 组件通信bus的使用 在utils文件下下创建bus.js // utils -

  • 超详细的vue组件间通信总结

    超详细的vue组件间通信总结

    目录 前言 一.props.$emit单向数据流 二.$parent.$children 三.$attrs.$listeners 四.provide.inject 五.eventBus(事件总线) 六.vuex 七.localstorage 总结 前言 组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attrs.$listeners provide.in

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

    目录 vue2.x vue3.x tiny-emitter插件用法 mitt插件用法 vue2.x Vue.prototype.$bus=new Vue() 监听: this.$bus.$on('方法名',(参数)=>{}),它可以累加 触发: this.$bus.$emit('方法名',实参值) 销毁:this.$bus.$off('方法名'),谁监听谁销毁 注意: 由于监听可以累加, 所以必须要有第四步销毁 vue3.x tiny-emitter插件用法 安装插件 npm i tiny-em

  • Vue3兄弟组件传值之mitt的超详细讲解

    目录 前言 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 项目中安装mitt 使用方式一:在原型中声明 使用方式二:在组件中引用 总结 前言 Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的.实现了事件触发器接口的库,例如 mitt 或 tiny-emitter. 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 首先它足够小,仅有200bytes. 其次支持全部事件的监听和批

  • Vue2 的12种组件通讯

    Vue2 的12种组件通讯

    目录 1. props 2. .sync 3. v-model 4. ref 5. $emit / v-on 6. $attrs / $listeners 7. $children / $parent 8. provide / inject 9. EventBus 10. Vuex 11. $root 12. slot 下面把每一种组件通信方式的写法一一列出 1. props 父组件向子组件传送数据,这应该是最常用的方式了 子组件接收到数据之后,不能直接修改父组件的数据.会报错,所以当父组件重新

  • Vue2和Vue3的10种组件通信方式梳理

    目录 props emit attrs和listeners provide/inject parent/children expose&ref EventBus/mitt 写在最后 Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式. 其中将要实现的通信方式如下表所示: 方式 Vue2 Vue3 父传子 props props 子传父 $emit emits 父传子

  • vue2与vue3中生命周期执行顺序的区别说明

    vue2与vue3中生命周期执行顺序的区别说明

    目录 vue2与vue3中生命周期执行顺序区别 生命周期比较 简单例子说明 三种情况下的生命周期执行顺序 1.单页面下生命周期顺序 2.父子.兄弟组件的生命周期顺序 3.不同页面跳转时各页面生命周期的执行顺序 vue2与vue3中生命周期执行顺序区别 生命周期比较 vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destro

  • vue2.0 兄弟组件(平级)通讯的实现代码

    1.前戏吧 先看看前两篇文章: 父组件传给子组件 子组件传给父组件 看图 看图 看图!!! 个人理解: 这明显是生活中弟弟打电话哥哥一样,双方都需要手机,需要信号发射塔. 弟弟 => A组件 哥哥 => B组件 弟弟的手机 => $emit发送数据 哥哥的手机 => $on监听并接收数据 信号发射塔 => 中间事件线 App.vue => 不用说都知道是地球 2. 代码 2.1.在src/asstes下新建中间事件线ligature .js (注意后缀.js) impo

  • Vue3中10多种组件通讯方法小结

    Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  •  用Vue Demi 构建同时兼容Vue2与Vue3组件库

     用Vue Demi 构建同时兼容Vue2与Vue3组件库

    目录 前言: 一.Vue Demi 中的额外 API 1.isVue2 and isVue3 二.Vue Demi 入门 前言: Vue Demi 是一个很棒的包,具有很多潜力和实用性.我强烈建议在创建下一个 Vue 库时使用它. 根据创建者 Anthony Fu 的说法,Vue Demi 是一个开发实用程序,它允许用户为 Vue 2 和 Vue 3 编写通用的 Vue 库,而无需担心用户安装的版本. 以前,要创建支持两个目标版本的 Vue 库,我们会使用不同的分支来分离对每个版本的支持.对于现

  • vue3中的父子组件通讯详情

    目录 一.传统的props 二.通过modeValue绑定 三.事件广播(vue3中$on和$emit已废弃),使用新的插件mitt 一.传统的props 通过在父组件中给子组件传值,然后在子组件中通过props接受数据 //父组件 <ValidateInput type="text" v-model="emailVal" :rules='emailRules' placeholder='请输入邮箱地址' ref="inputRef" &g

随机推荐