vue中EventBus的实现原理

通常我们在组件之间的通信的时候常常会使用到eventbus解决同胞组件之间的传值，但是一直都搞不懂eventBus的实现原理，今天我就给大家分享一下eventBus底层的原理,不对的地方希望大家多多指点。

我们使用class类的形式来实现EventBus的原理：

class myEvnetBus{

constructor(){

this.wrap= {}//给一个容器，去放置我们的事件

}

//订阅

$on(eventName, cb){//eventName为事件的名字。cb为回调函数

if(!this.wraps[eventName]){//判断我们定义的盒子里面有没有对应的key值

this.wrap[eventName]=[]//如果没有的话，我们给我们的key值赋予一个数组来保存我们的回调
}

this.wrap[eventName].push(cb)

//派发

$emit(eventName,...arg){

if(!this.wrap[eventName]) return

this.wrap[eventName].forEach(cb=>(...arg))

//删除

$off(){

this.wrap[eventName]=[]

}

export default new myEvnetBus

vue中EventBus的实现原理相关推荐

vue中路由的实现原理？
vue中路由的实现原理? 1.首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带'#'号的,其实对地址栏也就不怎么美观一点.其次是history路由也就是URL不带'#' ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
vue中路由实现的原理？
一.概念通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中 ...
vue中EventBus的基本使用
前言 vue组件中父子组件通信,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件.两个页面没有任何引入和被引入关系,该如何通信?使用Even ...
vue中的keep-alive实现原理
一.前言本文介绍的内容包括: keep-alive用法:动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其 ...
Vue中的scoped实现原理和样式穿透方法及原理
目录 scoped 一.什么是scoped,为什么要用二.scoped的原理三.示例样式穿透一.为什么需要穿透scoped? 二.样式穿透的方法三.样式穿透原理 1.示例 2.效果图 sco ...
Vue 中 CSS scoped 的原理
前言在日常的Vue项目开发过程中,为了让项目更好的维护一般都会使用模块化开发的方式进行.也就是每个组件维护独立的template,script,style.主要介绍一下使用<style sco ...
react和vue中自定义标签的原理在这里
文章目录前言一.自定义元素是什么 1 乱写的标签二.使用步骤 1 自定义标签 2 添加web组件内容 3结合template模板标签使用 4 自定义元素的生命周期方法三, 反射自定义属性总结 ...

vue中EventBus的实现原理

vue中EventBus的实现原理相关推荐

最新文章

热门文章