首页 > 其他分享 >Vue事件总线

Vue事件总线

时间:2024-06-01 16:13:17浏览次数:22  
标签:... Vue return 总线 eventName listeners handler 事件

const listeners = {};
export default {
    // 监听某一个事件
    $on(eventName, handler) {
        if(!listeners[eventName]) {
            listeners[eventName] = new Set();
        }
        listeners[eventName].add(handler);
    },
    // 取消监听
    $off(eventName, handler) {
        if(!listeners[eventName]) return;
        listeners[eventName].delete(handler);
    },
    // 触发事件
    $emit(eventName, ...args) {
        if(!listeners[eventName]) return;
        for(let handler of listeners[eventName]) {
            handler(...args);
        }
    }
}

标签:...,Vue,return,总线,eventName,listeners,handler,事件
From: https://www.cnblogs.com/bingquan1/p/18226046

相关文章

  • vue3 状态管理库pinia使用测试
    Home.vue组件中使用测试<template><divclass="home"><div>fone:{{fone}}</div><div>ftwo:{{ftwo}}</div><div>ffour:{{ffour}}</div><div&g......
  • 『手撕Vue-CLI』获取下载目录
    开篇在上一篇文章中,简单的对Nue-CLI的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能。背景在Nue-CLI中,我现在实现的是create指令,这个指令本质就是首先拿到模板名称和版本号之后,然后去进行下载对应的模板,关于下载那么肯定要面临的问题就是如何下载?下......
  • 基于SpringBoot+Vue的在线答疑管理系统设计与实现毕设(文档+源码)
            目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的在线答疑管理系统,项目源码请点击文章末尾联系我哦~目前有各类成......
  • 基于SpringBoot+Vue的在线BLOG网管理系统设计与实现毕设(文档+源码)
            目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的在线BLOG网管理系统,项目源码请点击文章末尾联系我哦~目前有各类......
  • 基于SpringBoot+Vue的校园博客管理系统设计与实现毕设(文档+源码)
          目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的校园博客管理系统,项目源码请点击文章末尾联系我哦~目前有各类成品毕......
  • 《计算机网络微课堂》实验3 总线型以太网的特性(广播,竞争总线,冲突)
    本实验的内容主要是为了验证总线型以太网的特性,例如广播特性,例如各组机对总线的竞争使用以及可能产生的碰撞。首先拖动三台计算机到逻辑工作空间,我们使用集线器让它们互联起来,使用自动连线,将每台计算机连接到集线器上。网络拓扑从表面上看是个星型的结构,但它实际上是一个总线型的......
  • 使用 Vue 3 和 JsBarcode 开发一维码显示组件
    在现代前端开发中,条形码(或称一维码)在许多应用场景中非常常见,例如商品管理、物流跟踪等。本文将介绍如何使用Vue3和JsBarcode库来创建一个灵活的一维码显示组件,并展示如何在应用中使用它。1.安装必要的依赖首先,我们需要安装Vue3和JsBarcode。如果你还没有创建Vue3......
  • vue3 组件级权限控制
    权限控制程度分为:1.页面级2.组件级3.代码级1.页面级这是大部分前端遇到的级别。依靠路由守卫,如果没有权限,就看不到菜单,就进不到页面。不会给页面带来侵入性。什么是侵入性,就是写页面组件的时候,还要考虑权限。2.组件级有没有权限都可以看到页面组件,但是不同权限的人,......
  • vue3 语法测试
    Home.vue<template><divclass="home"><div>{{fone}}</div><div>{{ftwo}}</div><div>{{ffour}}</div><div>{{ffive}}......
  • vue3组件通信与props
    title:vue3组件通信与propsdate:2024/5/31下午9:00:57updated:2024/5/31下午9:00:57categories:前端开发tags:Vue3组件Props详解生命周期数据通信模板语法CompositionAPI单向数据流Vue3组件基础在Vue3中,组件是构建用户界面的基本单位,它们是可复用......