前端开发小技巧$eventBus

原创 已于 2022-03-29 14:32:18 修改 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2022-03-29 14:31:55 首次发布
本文介绍Vue.js中实用的计算属性技巧、全局eventBus的应用场景及其具体实现方式，包括数据处理、布局设计、红点提示效果制作等，并展示了如何通过分页和事件监听提升用户体验。

1.计算属性 小技巧

全局使用eventBus

2.1.发布事件

2.2.监听执行事件 --销毁事件

 应用场景

 

 代码逻辑:
1.分析数据: 判断数据是否有值,无值则显示暂无数据
2.大体布局: (ul>li>icon + 右内容>title+时间)
3.红点: 给元素加类 定位 + before伪元素实现
4.处理数据: 接收数据后将数据处理,只返回自己需要的数据
5.分页将数据拆分开,监听当前页,有变化则执行方法更新数据
5.事件监听及发布 利用eventbus将资讯事件和导航栏进行关联 

FF_XM
关注
【3分钟准备前端面试】微信小程序
江拥羡橙的博客
04-12 246
系统梳理了小程序开发的核心知识点和面试考察重点。建议结合项目实践进行针对性准备，掌握原理级理解与实战经验的双重能力提升。
前端面试题：JS 如何实现事件总线 Event Bus
lwebapp.com
03-10 2268
原文：https://lwebapp.com/zh/post/event-bus 介绍 Event Bus 事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心，一个模块发送消息，其它模块接受消息，就达到了通信的作用。 比如，Vue 组件间的数据传递可以使用一个 Event Bus 来通信，也可以用作微内核插件系统中的插件和核心通信。 原理 Event Bus 本质上是采用了发布-订阅的设计模式，比如多个模块 A、B、C 订阅了一个事件 EventX，然后某一个模块 X 在事件总线发布了这个事件，
vue组件间通信之兄弟组件通信（$EventBus）
qq_26905813的博客
09-17 2685
vue组件间通信之兄弟组件通信（$EventBus）
Vue 的跨组件通信：深入探讨 $refs、EventBus 与 Vuex 的最佳实践
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-27 935
refs、EventBus 是一种轻量级的事件驱动模式，用于在 Vue 应用的不同组件之间传递消息。它实际上是一个空的 Vue 实例，用作中央事件总线，允许组件通过触发和监听事件来进行通信。Vuex 是 Vue 官方提供的一个状态管理库，用于管理组件之间的状态共享。Vuex 提供了集中式存储和严格的规则，使得状态管理变得更加可控、可预测。通过上面的分析，我们可以看到，Vue 提供了多种方式来实现跨组件通信，每种方式都有其适用的场景和特点。选择合适的通信方式，可以大大提高代码的可维护性和开发效率。$refs。
Vue2.x eventBus全局管理事件的订阅发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-03 1882
Event Bus是一个全局的Vue实例，用作事件中心，允许组件通过它发送和监听事件。这种方式特别适用于需要跨多个层级的组件进行通信的场景，或者是没有父子关系的组件间通信。
[前端攻坚]：Eventbus实现更新
郊眠寺
12-19 379
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
eventBus
前端攻城狮的博客
03-30 297
传递方：eventBus.$emit('fnName',this,data) 接收方：eventBus.#on('fnName',function(data) {}) 在assets中创建eventBus.js文件 import Vue from 'vue' const eventBus = new Vue() export default eventBus 在传递方和接收方都引入eventBu...
React 开发小技巧：父组件如何‘操控’子组件的函数？
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
08-14 631
在 React 开发中，我们常常遇到父组件需要‘指挥’子组件执行某些操作的场景。比如，点击父组件的按钮，触发子组件的某个动画或数据刷新。今天，我就来分享几种在 Hooks 环境下，父组件如何优雅地调用子组件方法的实战技巧！”
EventBus小程序源码解析与应用实例
“EventBus-master.zip”是一个基于JavaScript实现的事件总线（Event Bus）机制的小程序源码项目，其核心功能是为前端开发提供一种轻量级、高效且解耦的组件间通信方式。该源码项目以“EventBus”为核心命名，表明其...
【Vue.js高效界面构建指南】：提升校园跑腿用户体验的前端开发技巧
[【Vue.js高效界面构建指南】：提升校园跑腿用户体验的前端开发技巧](https://habrastorage.org/web/88a/1d3/abe/88a1d3abe413490f90414d2d43cfd13e.png) # 摘要 本文旨在深入解析Vue.js框架的核心原理，并探讨其在...
vue 事件总线 eventbus 你学会了吗？，前端基础开发
weixin_58085973的博客
04-01 905
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家。
vue 事件总线EventBus的概念、使用以及注意点
零一的博客
05-04 4642
vue 事件总线前言EventBus的简介EventBus的使用一、初始化二、向EventBus发送事件 前言 vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念 EventB...
前端vue2中全局事件EventBus的使用方法
m0_49714202的博客
11-19 1820
前端vue2中全局事件EventBus的使用方法
【$eventBus使用】
qq_46106080的博客
11-02 217
$eventBus
什么是Redux？它的核心概念有哪些？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-24 884
引言Redux 核心概念Store（仓库）State（状态）Action（动作）Reducer（规约器）安装与初始化示例代码示例一：定义 Action示例二：编写 Reducer示例三：合并 Reducers示例四：连接 Store 和组件功能使用思路1. 状态管理2. 异步操作3. 模块化和可测试性实际工作中的使用技巧结语return {return {Redux 为复杂的前端应用提供了一套强大而灵活的状态管理方案。
Vue事件总线（EventBus）使用指南：详细解析与实战应用
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-31 2万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
【EventBus】EventBus的基本用法
摸鱼小小虫的博客
12-11 2911
EventBus是一款针对于Android优化的发布-订阅事件总线。它优化了各组件、组件与后台之间的通信，可以用于代替广播实现通信。文章介绍了EventBus的基本使用方法
EventBus
weixin_44890304的博客
08-08 867
EventBus是一个基于发布者/订阅者模式的事件总线框架。 1、概述 （Android EventBus）事件总线，简化了活动、碎片、线程、服务等之间的通信，代码少、效率高。 2、EventBus是一种优化了的发布/接受事件的总线。 3、EventBus的优点 （1）解耦和简化Activities, Fragments等组件以及后台线程之间的通信，分离事件发送方和 接收方 使得代码更简洁，避免...
前端通信事件：深入理解 Event Bus 与浏览器通信 API
写完这行代码打球去的博客
04-02 871
Event Bus是一种基于发布-订阅模式的通信机制，常用于模块之间的解耦。它是 Node.js 各模块的基石，同时也是前端组件通信的重要手段之一。：通过实现页面与 Service Worker 之间的通信。适合离线缓存和后台任务场景。' });});：允许多个页面共享一个 Worker 实例，用于跨页面通信。' });WebSocket：用于实时通信，适合需要服务器参与的场景。' }));IndexedDB：虽然主要用于存储，但也可以通过轮询或监听变化实现通信。' });
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值