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

vue事件总线

时间:2023-06-14 09:11:24浏览次数:34  
标签:vue 总线 eventName listeners handler 事件

//事件总线: 类似于单独对于一个功能的处理。组件间通信的方式;适用于任意组件间通信
// 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(const handler of listeners[eventName]){
//             handler(...args)
//         }
//     }
// }

//事件总线还有这种写法,这个vue实例上也有on,off,emit
/*
 * 事件名:mainScroll
 * 含义:主区域滚动条位置变化后触发
 * 参数:
 * - 滚动的dom元素,如果是undefined,则表示dom元素已经不存在
 *
 * 事件名:setMainScroll
 * 含义:当需要设置主区域滚动条位置时触发
 * 参数:
 * - 滚动高度
 */

import Vue from "vue";
const app = new Vue({})
Vue.prototype.$bus = app;
export default app;

  

标签:vue,总线,eventName,listeners,handler,事件
From: https://www.cnblogs.com/wsx123/p/17479194.html

相关文章

  • vue组件之间的数据传递
    一、组件之间的关系父子关系、兄弟关系、跨级关系二、父子之间数据传递1、父组件向子组件传递【使用props】第一步:在父组件中使用子组件时,给子组件绑定属性第二步:在子组件中使用props接收绑定的属性值2、子组件向父组件传递【使用$emit】第一步:在子组件中通过......
  • vue路由
    1、在dos窗口下安装npminstallvue-router@3--save-dev--registry=http://registry.npmmirror.com2、配置路由①在src目录下面,新建router文件夹②然后再其中创建index.js路由文件、index.js代码importVuefrom'vue'//导入路由插件importVueRouterfrom'......
  • 【vue】前端下载文件自定义文件名称
    【vue】前端下载文件自定义文件名称https://blog.csdn.net/weixin_48200589/article/details/125067618下载文件自定义文件名称文件下载名称不想和后端提供的URL一样怎么办呢?1.首先给按钮去绑定一个事件2.正常我们的下载处理方式3.自定义下载的文件名字文件下载名称......
  • Vue3
    目录一vue3介绍1Vue3的变化1.1性能的提升1.2源码的升级1.3拥抱TypeScript1.4新的特性2组合式api和配置项api3vue3之vue实例4创建vue3项目4.1使用vue-cli创建4.2使用vite创建5setup6响应式6.1ref函数6.2reactive函数7reactive与ref对比8计算,监听属性8.1监......
  • Vue-watch-deep 深度监听
    首先明确一个概念,Vue是可以监听到多层级数据改变的,且可以在页面上做出对应展示。但是Vue提供的watch方法,默认是不提供深度监听的(deep默认为false,也就是不开启深度监听)(刚挂载的时候是不执行的,只有挂载完成之后的变化才会执行。如果我们想要初次挂载的时候就l执行,则需......
  • vue 的双向绑定原理(vue 的响应式原理)流程
    一、原理 二、流程第一步,“数据劫持”vue2.x用Object.defineProperty()方法来实现数据劫持,为每个属性分配一个订阅者集合的管理数组depvue3.x用ES6的Proxy构造函数来实现数据劫持。第二步,“添加订阅者”在编译的时候在该属性的数组dep中添加订阅者添加方......
  • vue3进阶——组件基础
    组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构,这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。定义组件当使用构建步骤时,我们一般......
  • vue中computed的详细讲解
    1.定义    computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新2.用法    一般情况下,computed默认使用的是getter属性  3.computed的响应式依赖(缓存)1.computed的每一个计算属性都会被缓存起来,只要计......
  • boost库之事件处理
    一、概述Boost.Signals所实现的模式被命名为"信号至插槽",它基于以下概念:当对应的信号被发出时,相关联的插槽即被执行,原则上,可以把"信号"和"插槽"分别替换为'事件'和'事件处理器',它提供了一个名为boost::signal的类,定义于boost/signal.hpp,实际上,这个头文件是唯一一个需要知道的,因......
  • Vue项目优化
    一、代码层面优化(1)v-if和v-show区分使用场景v-if和v-show的区别区别v-ifv-show手段动态的向DOM树内添加或者删除DOM元素通过设置DOM元素的display样式属性控制显隐编译过程有一个局部编译/卸载的过程是简单的基于css切换编译条件初始条件为假,则什么也不......