前端开发小技巧$eventBus

已于 2022-03-29 14:32:18 修改
阅读量1.6k 收藏
点赞数
文章标签： javascript
于 2022-03-29 14:31:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ff_xm/article/details/123820503
版权

1.计算属性 小技巧

全局使用eventBus

2.1.发布事件

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

 应用场景

 

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

FF_XM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
10-15
主要介绍了vue 组件之间事件触发($emit)与event Bus($on)的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[前端攻坚]：Eventbus实现更新
郊眠寺
12-19 299
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
vue 事件总线EventBus的概念、使用以及注意点，【高级前端架构师系统学习】
最新发布
m0_61369227的博客
03-28 667
在上一个例子中，我们A组件向事件总线发送了一个事件aMsg并传递了参数MsgA，然后B组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开B组件，然后再次进入B组件时，又会触发一次对事件aMsg的监听，这时时间总线里就有两个监听了，如果反复进入B组件多次，那么就会对aMsg进行多次的监听。这样，B组件就轻松接收到了A组件传递过来的参数，并成功展示了该参数，这样是不是就很简单的解决了各组件之间的通讯呢？解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听。
eventBus
前端攻城狮的博客
03-30 236
传递方：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...
前端vue2中全局事件EventBus的使用方法
m0_49714202的博客
11-19 1631
前端vue2中全局事件EventBus的使用方法
【$eventBus使用】
qq_46106080的博客
11-02 158
$eventBus
vue采用EventBus实现跨组件通信及注意事项小结
11-30
EventBus EventBus是一种发布/订阅事件设计模式的实践。 在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex。 挂载EventBus到vue.prototype 添加bus.js...
详解vue 组件之间使用eventbus传值
01-21
对于前端的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道怎么去使用数据 当然，使用存储也是可以得，但是并非一定要缓存，...
小程序源码 EventBus-master.zip
03-19
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，...
前端面试题：JS 如何实现事件总线 Event Bus
lwebapp.com
03-10 2056
原文：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 2291
vue组件间通信之兄弟组件通信（$EventBus）
EventBus
weixin_44890304的博客
08-08 790
EventBus是一个基于发布者/订阅者模式的事件总线框架。 1、概述 （Android EventBus）事件总线，简化了活动、碎片、线程、服务等之间的通信，代码少、效率高。 2、EventBus是一种优化了的发布/接受事件的总线。 3、EventBus的优点 （1）解耦和简化Activities, Fragments等组件以及后台线程之间的通信，分离事件发送方和 接收方 使得代码更简洁，避免...
前端框架vue之全局事件总线(GlobalEventBus)
qq_45496282的博客
07-06 689
在全局事件总线出现之前，如果说子组件想要给父组件传递数据，交互信息时，需要通过给子组件绑定自定义事件，再借用函数来实现组件间的交互，比较麻烦！全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。 实现途径：需要满足两点要求，一要全局事件都能看见，二，再绑定全局对象on,on,on,off,$emit。首先在main文件里面实现，全局可见。 即利用vue中最重要
eventBus的使用
執筆的博客
07-09 124
创建utils文件夹 – 创建eventbus.js里面写入 import Vue from "vue"; // 广播对象 const EventBus = new Vue(); Object.defineProperties(Vue.prototype,{ $bus:{ get:function(){ return EventBus } } }) 在main.js全局引入 import './utils/eventbus'; 发
eventBus通信（前端js）
Hello
07-08 1452
使用方式类似于websocket 1、html中引入 <script src='./guide/lib/sockjs.min.js'></script> <script src='./guide/lib/vertx-eventbus.js'></script> 2、后台提供eventbus的服务访问地址 如：http://192.168.xxx.xxx:8080/eventbus 3、js监听，"chat.to.client"与"chat.to.server
eventBus的基本用法
qq_36939013的博客
07-02 531
eventBus主要用来传递绑定事件，绑定给EventBus里面，然后别的js文件可以触发eventBus里面的事件 这里绑定了4个事件 //播放时间 eventBus.on("videoTime",function (time) { console.log("当前时间", time); }) //暂停 eventBus.on("videoPause",function () { ...
EventBus 的使用
weixin_54160772的博客
08-21 245
EventBus 的使用
浅谈EventBus的用法
baidu_32015283的博客
02-27 223
现在项目中会越来越多的用到EventBus事件来取代广播机制，以减少代码，防止fragment里面套fragment找不到上下问而报错，下面就是我在项目中用到的EventBus代码。 1.在你的app.gradle 下添加依赖 compile ‘org.greenrobot:eventbus:3.0.0’然后编译一下你的项目 2.定义一个jvaebean用来传递参数（或者直接在你接受注册事件...
this.$eventBus.$emit
03-16
this.$eventBus.$emit是Vue.js中的一种事件机制，用于在组件之间进行通信。通过该方法，一个组件可以向其他组件发送自定义事件，并传递数据。 具体来说，this.$eventBus是一个Vue实例，它可以作为一个中央事件总线...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值