vue中的总线机制(EventBus)解析

目录
  • 一、EventBus的简介
  • 二、使用方法
    • 第一步：2种方式初始化
    • 第二步：发送事件
    • 第三步：接受事件
    • 第四步：移除事件
  • 三、全局EventBus
    • 1、注册，在main.js中
    • 2、在组件中使用
  • 四、EventBus的优缺点

一、EventBus的简介

EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以平行的接到到相对应的数据。

二、使用方法

第一步：2种方式初始化

在项目中使用事件总线时，需要初始化一条总线，初始化的方式有两种

第一种：通过 .js 文件将总线作为模块化导入

// EventBus.js
import Vue from 'vue'
export defalut new Vue()

第二种：通过 prototype 将总线注册为全局总线，直接在main.js中初始化以下代码（推荐使用）

//main.js
 
Vue.prototype.bus = new Vue();
new Vue({
  render: h => h(App)
    ...
}).$mount('#app');
/*
*通过把一个vue实例赋于Vue构造函数原型上的一个属性bus（当然起任何名称都是可以的）
*而每个Vue实例都是有$emit和$on方法的
*由于bus属性在Vue原型上，根据原型链查找规则，在页面中我们就可以通过 this.bus.$emit 和 
*this.bus.$on来进行跨组件通信了
*/

第二步：发送事件

在组件中引入总线文件 ，使用 EventBus.$emit(‘事件名称’，数据)进行发送数据

//导航栏组件中
//点击事件发生时发布一个事件
this.bus.$emit('even-name'，args1, arg2 , ...)
 
//这里我们可以把点击导航的相关信息携带出去

第三步：接受事件

在组件中引入总线文件 ，使用 EventBus.$on(‘emit事件名’，callback(payload1...))进行接受事件

在一个组件中某事件如果只监听一次的话，可以使用 EventBus.$once('事件名称',callBack(payload1...));

//路由显示页面中
this.bus.$on('event-name', (...args) => {
    //根据参数来进行路由跳转
})

第四步：移除事件

EventBus.$off('事件名', callback)，只移除这个回调的监听器。
EventBus.$off('事件名')，移除该事件所有的监听器。
EventBus.$off()， 移除所有的事件监听器，注意不需要添加任何参数。
EventBus.$off('XXXXX', {}) // 移除指定事件
EventBus.$off('XXXXX') // 移除应用内所有对此事件的监听
EventBus.$off() // 移除应用内所有事件的监听

三、全局EventBus

1、注册，在main.js中

Vue.prototype.$bus = new Vue();

2、在组件中使用

this.$bus.$on("sendMessage" , (msg) => {
    _this.message = msg
})
this.$bus.$emit("sendMessage" , "这是从D组件中传递到兄弟组件的内容")

四、EventBus的优缺点

缺点

  • vue作为单页面应用，如果在某一个页面刷新了之后，与之相关的EventBus会被移除。
  • 如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
  • 由于是都使用一个Vue实例，所以容易出现重复触发的情景，两个页面都定义了同一个事件名，并且没有用$off销毁（常出现在路由切换时）。

优点

  • 解决了多层组件之间繁琐的事件传播。
  • 使用原理十分简单，代码量少。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue之bus总线的简单使用解读

    目录 vue bus总线的使用 场景描述 如下所示 bus总线的原理解析 1.怎么理解bus总线 2.bus组件存在的条件和注册 3.使用 总结 vue bus总线的使用 场景描述 A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下所示 D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad

  • Vue全局事件总线$bus安装与应用小结

    Vue全局事件总线$bus安装与应用小结

    目录 1.什么是全局事件总线 2.安装 3.使用 4.销毁 完整版示例: 1.什么是全局事件总线 一种组件间通信的方式,适用于任意组件间通信. 2.安装 在main.js里安装全局事件总线: new Vue({ ...... beforeCreate(){ //安装全局事件总线,$bus就是当前应用的vm Vue.prototype.$bus=this } ...... }) 3.使用 使用全局事件总线: 1.接收数据:A组件想接收数据,则要在A组件中给$bus绑定自定义事件,事件的回调留在A组

  • vue总线机制(bus)知识点详解

    vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些: //

  • vue之bus总线简单使用讲解

    vue之bus总线的简单使用 场景描述: A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下: D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad(){ console.log('加载完触发事件'); this.$bus.$emit('itemDataLoad') // this.$bu

  • Vue eventBus事件总线封装后再用的方式

    目录 前言 空vue实例构建的事件总线 简单的方式 复杂又简单的方式 总结 前言 现在的项目中是不是在使用 eventbus 的时候,还有很多人都是直接创建一个vue 实例直接使用的,哪里需要哪里引入,而没有简单的处理下.接下来就先说下这种方式. 空vue实例构建的事件总线 在改造一个项目的时候就发现,里面的 bus.js 文件中就是这么处理的.两行代码搞定. import Vue from "vue"; export default new Vue() 使用的时候,就没那么简单了,有

  • vue3+ts使用bus事件总线的示例代码

    1.在vue2中我是这样使用的 //创建一个vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; //在main.js中引入 import vueBus from '@/utils/vueBus'; Vue.use(vueBus); //可根据this.$bus._events['事件名'] 来查看是否

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

  • 在Uni中使用Vue的EventBus总线机制操作

    首先我们要使用的EventBus事件总线,能够做到兄弟组件,或者不是父子关系的页面达到数据相互传递的效果 一种做法是在main.js中创建事件总线 创建完$EventBus后,就可以直接在页面中使用事件总线的方法来发送和接收事件了 第二种做法:封装事件总线 使用的时候直接引入就可以了 补充知识:vue里使用EventBus解决兄弟组件间的传递信息 ①初始化 import Vue from 'vue' export const EventBus = new Vue(); ②在需要的调用其他组件的页

  • Vue中事件总线(eventBus)的深入详解及使用

    Vue中事件总线(eventBus)的深入详解及使用

    目录 1.简介 2.使用 安装及引入 在组件中使用 补充:移除监听事件 总结 1. 简介 Vue 组件中常见的有:父子组件通信.兄弟组件通信.而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件. 今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢? 如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信. eventBus

  • vue中的总线机制(EventBus)解析

    目录 一.EventBus的简介 二.使用方法 第一步:2种方式初始化 第二步:发送事件 第三步:接受事件 第四步:移除事件 三.全局EventBus 1.注册,在main.js中 2.在组件中使用 四.EventBus的优缺点 一.EventBus的简介 EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据. 二.使用方法 第一步:2种方式初始化 在项目

  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

  • Vue中$nextTick实现源码解析

    Vue中$nextTick实现源码解析

    目录 正文 先看一个简单的问题 内部实现 先看第一块: 再看第二块: 然后是第三块: 最后是第四块: 正文 先看一个简单的问题 <template> <div @click="handleClick" ref="div">{{ text }}</div </template> <script> export default { data() { return { text: 'old' } }, methods:

  • vue中window.onresize的使用解析

    目录 window.onresize的使用 说下重点 window.onresize笔记 1.浏览器尺寸变化响应事件 2.谷歌浏览器中 3.页面尺寸变更事件 window.onresize的使用 说下重点 window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的

  • vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    目录 准备 封装 unicode引用封装 font-class引用封装 symbol引用封装 引入 全局引入 局部引入 使用 在线使用 有时候会因网络问题影响用户体验:直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护.​ 封装基于阿里巴巴图标库的项目图标. 准备 将项目内的图标下载至本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没

  • vue中巧用三元表达式解析

    vue中巧用三元表达式解析

    目录 如何巧用三元表达式 三元表达式的巧妙使用 :class=“ “的三元表达式写法 如何巧用三元表达式 一开始我并不喜欢阅读别人的代码,话说程序员最讨厌的事:写代码要写文档.写代码要写注释.别人的代码没有文档.别人的代码没有注释.后来发现阅读别人的代码虽然很枯燥,但是很锻炼逻辑思维,而且还能学到很多东西,比如我下面要说的这个: 三元表达式的巧妙使用 在某天(其实具体是哪天我也忘了),我在阅读别人的代码时发现一串三元表达式,感觉很6,像是打开新世界的大门一样,顿时感觉只有你想不到的,没有别人做不

  • Vue中状态管理器(vuex)详解以及实际应用场景

    目录 Vue中 常见的组件通信方式可分为三类 Vuex简介 1. State 2. Getters 3. Mutations 4. Actions 5. 使用 mapState.mapGetters.mapActions 简化 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

随机推荐