展开

关键词

vue 事件线EventBus的概念、使用以及注意点

vue 事件线 前言 正文 EventBus的简介 EventBus的使用 一、初始化 二、向EventBus送事件 三、接收事件 四、移除监听事件 结束语 前言 vue组件中的数据传递最最常见的就是父子组件之间的传递 实例中的$EventBus事件线中的$on属性,监听A组件送 到事件线中的aMsg事件*/ this. 但是,这时如果我们离开B组件,然后再次进入B组件时,又一次对事件aMsg的监听,这时时间线里就有两个监听了,如果反复进入B组件多次,那么就对aMsg进行多次的监听。 而言之,A组件只向EventBus送了一次事件,但B组件却进行了多次监听,EventBus容器中有很多个一模一样的事件监听器这时就出现,事件只一次,但监听事件中的回调函数执行了很多次 解决办法 实例中的$EventBus事件线中的$on属性,监听A组件送 到事件线中的aMsg事件*/ this.

35310

Vue事件线EventBus)使用详细介绍

如果咱们的应用程序需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件线 ,即 EventBus来通信。 EventBus的简介 EventBus 又称为事件线。 在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用慎,就造成难以维护的 $EventBus = new Vue() 注意,这种方式初始化的 EventBus 是一个 全局的事件线 。稍后再来聊一聊全局的事件线。 还要就是如果业务有反复操作的页面,EventBus 在监听的时候就很多次,也是一个非常大的隐患。这时候我们就需要好好处理 EventBus 在项目中的关系。 () { return EventBus } } }) 在这个特定的线中使用两个方法 $on 和 $emit 。

95720
  • 广告
    关闭

    腾讯云618采购季来袭!

    一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue组件通信方式及其应用场景

    五 事件线EventBus EventBus事件线, EventBus 所有事件统一调度,有一个统一管理事件中心,一个组件绑定事件,另一个组件事件,所有的组件通信再收到父子组件的限制,那个页面需要数据 () 这个就是一个简单的事件线,有on,emit两个方法。 需要数据就通过on绑定,传递数据就emit。 4 缺点 1 维护困难,容易引起连锁问题 如果我们采用事件线这种通信模式,因为所有事件是高度集中,统一管理的,中间如果有一个环节出现错误,就造成牵一动全身的灾难.而且后期维护也是十分困难的。 六 事件线二 new Vue new Vue 这种通信方式和eventBus大致差多,有一点同的是,以vue实例作为eventBus中心,除了我们可以用on,emit之外,我们还可以用vue下的data

    19930

    前端-vue数据传递: 我有特殊的实现技巧

    有这么几种数据传递方式,vuex、props、eventBus和特殊的eventBus。 vuex 介绍,数据量和复杂度达用它你才向下看。 2、$on在组件销毁后自动解除绑定,若同一组件多次生成则多次绑定事件,则一次 $emit,多次响应,需额外处理。 3、数据非“长效”数据,无法保存,只在 $emit后生效。 1、正统的eventBus只是用来绑定和事件,并关心数据,与数据生交集。 绑定监听都在bus上,重复绑定。 3、数据只在$emit后可用?使用计算属性直接读取存在bus上的值,需要再次事件。 为什么要用事件 其实用 $emit,使用 bus.val = 1直接赋值也是可以的,那么为什么这么做呢? 简化版的vuex 其实这种eventBus就是简化版的vuex。

    38420

    组件传值

    ,并太适合向多个子组件传递数据 provide/inject 侧重于在开高阶插件/组件库时使用,并推荐用于普通应用程序代码中 子组件给父组件传值 1.子组件通过$emit事件给父组件传值 $emit default { data() { return { msg: "子组件传给父组件的值" } }, methods: { //子组件通过$emit自定义事件给父组件传值 eventBus 就是一个vue实例来作为全局的事件线,兄弟组件之间通过 eventBus. on和eventBus.on 和 eventBus. on和eventBus.emit 注册事件来传递数据 $emit自定义事件给子组件B传值 eventBus. $on注册自定义事件接收子组件A的传值 eventBus.

    12310

    【设计模式】692- TypeScript 设计模式之布-订阅模式

    概念介绍 在软件架构中,布-订阅模式是一种消息范式,消息的送者(称为布者)「将消息直接送给特定的接收者」(称为订阅者)。 而且即使部分子系统取消订阅,也影响「事件线」的整体管理。「布-订阅模式」中每个应用程序都可以专注于其核心功能,而「事件线」负责将消息路由到每个「订阅者」手里。 缺点** 在创建订阅者本身消耗内存,但当订阅消息后,没有进行布,而订阅者一直保存在内存中,占用内存; 创建订阅者需要消耗一定的时间和内存。如果过度使用的话,反而使代码好理解及代码好维护。 Vue.js 使用示例 参考文章:《Vue事件线EventBus)使用详细介绍》 (https://zhuanlan.zhihu.com/p/72777951)。 所以在实现布-订阅模式,关键在于实现这个事件线,在某个特定时间某个特定事件,从而监听这个特定事件的组件进行相应操作的功能。布-订阅模式在很多时候非常有用。 参考文章 1.

    24721

    09Vue.js快速入门-Vue入门之Vuex实战

    但是复杂的页面逻辑,组件之间的数据共享处理就需要通过事件线的方式解决或者使用Vue的Vuex框架了。 9.3. 事件线方式解决非父子组件数据同步 如果非父子组件怎么通过事件进行同步数据,或者同步消息呢?Vue中的事件和监听都是跟一个具体的Vue实例挂钩。 所以在同的Vue实例中想进行事件的统一跟踪和,那就需要一个公共的Vue实例,这个实例就是公共的事件对象。 ? image 参考下面做的一个购物车的案例的代码: <! 当第一次接Vuex的时候,眼前一亮,之前经过Redux之后,被它繁琐的使用令我痛苦已,虽然思路很清晰,其实完全可以设计的更简单和高效。 当我接到Vuex之后,现这就是我想要的。 Action: action可以Mutations,能直接改变state。 看下面一张图了解一下Vuex整体的数据流动: ? image 9.6.

    50590

    使用eventBus事件的重复事件问题的解决

    使用 eventBus 事件线,当事件时,送一个通知出去,在需要响应的地方接收这个通知,响应事件。 创建 EventBus //新建一个 js 文件,写下如下代码就创建好了一个 eventbus,没错,就是这么简单 import Vue from 'vue' export default new Vue /utils/eventBus' Vue.prototype.bus = bus; 送事件 在事件的地方送事件 this.bus.$emit(this. 接收事件 事件已经送,接下来只需要在需要接收事件的地方接收这个事件,然后对事件进行响应就可以了。 this.bus.$on(this. 事件重复的问题 坑一 正当你开心的准备玩耍的时候却现好像有哪里对劲,怎么事件重复了,而且每次切换过路由后,事件执行次数就加一,这怎么行,假如用户非常频繁的切换页面,那事件执行次数越来越多

    1.7K30

    面试官:Vue组件间通信方式都有哪些?

    二、组件间通信解决了什么 在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、碰等方式进行信息传递,到了今天,随着科技水平的飞速展,通信基本完全利用有线或无线电完成,相继出现了有线电话、固定电话 、无线电话、手机、互联网甚至视频电话等各种通信方式 从上面这段话,我们可以看到通信的本质是信息同步,共享 回到vue中,每个组件之间的都有独自的作用域,组件间的数据是无法共享的 但实际开工作中我们常常需要让组件之间共享数据 三、组件间通信的方案 整理vue中8种常规的通信方案 通过 props 传递 通过 $emit 自定义事件 使用 ref EventBus 或 root attrs 与 listeners Provide $refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应的数据 EventBus 使用场景:兄弟组件传值 创建一个中央时间线EventBus 兄弟组件通过emit自定义事件,emit 第二个参数为传递的数值 另一个兄弟组件通过$on监听自定义事件 Bus.js // 创建一个中央时间线类 class Bus { constructor() { this.callbacks

    24810

    Vue 组件间通信方法汇

    Vue 组件间通信方法汇 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案。 $emit('handle-change-color') // 使用 $emit 方法父组件 handle-change-color 事件 // this. 非父子组件通信 中央事件线 我们可以使用使用中央事件线来处理非父子组件间的通信 具体步骤是创建一个 Vue 实例,然后 $on 监听事件,$emit 来派事件 // src/eventBus.js import Vue from 'vue' export default new Vue() 首先创建并导出一个 Vue 实例 import bus from '@/eventbus' export this.colored }) } } 祖先元素 emiteventBus的事件¨G15G祖先元素on 方法监听 eventBus 的事件 provide/inject 适用于祖先和后代关系的组件间的通信

    27910

    Vue中组件之间8种通信方式,值得收藏

    之前写了一篇关于vue面试结的文章, 有少网友提出组件之间通信方式还有很多, 这篇文章便是专门结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢 而且 props 只读,可被修改,所有修改都失效并警告。 2. 子组件向父组件传值 对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就将参数arg传递给父组件,父组件通过v-on监听并接收参数。 eventBus 又称为事件线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册送事件或接收事件, 所以组件都可以通知其他组件。 初始化 首先需要创建一个事件线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus

    37030

    Vue中组件之间8中通信方式,值得收藏

    之前写了一篇关于vue面试结的文章, 有少网友提出组件之间通信方式还有很多, 这篇文章便是专门结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢 而且 props 只读,可被修改,所有修改都失效并警告。 2. 子组件向父组件传值 对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就将参数arg传递给父组件,父组件通过v-on监听并接收参数。 eventBus 又称为事件线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册送事件或接收事件, 所以组件都可以通知其他组件。 初始化 首先需要创建一个事件线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus

    39800

    Vue中组件之间8中通信方式,值得收藏

    之前写了一篇关于vue面试结的文章, 有少网友提出组件之间通信方式还有很多, 这篇文章便是专门结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢 而且 props 只读,可被修改,所有修改都失效并警告。 2. 子组件向父组件传值 对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就将参数arg传递给父组件,父组件通过v-on监听并接收参数。 eventBus 又称为事件线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册送事件或接收事件, 所以组件都可以通知其他组件。 初始化 首先需要创建一个事件线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus

    39941

    Vue之全局事件线初体验

    最近在跟着某硅谷网课学Vue 学到全局事件线 写写博客加深自己的印象 全局事件线的简介 EventBus 又称为事件线。 在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用慎,就造成难以维护的灾难 ,在子组件中也是可以父组件中的事件的,具体原因可以了解一下我的上篇博客 然而兄弟组件之间通信就行了,俩组件互相看到,能其中一个给另一个绑定事件。 就比如说你有件事想拜托一下李四,但你又跟人家认识,这时候你就要找你们共同的朋友张三当桥梁。而全局事件线就是一个老好人,跟所有人都认识,谁都可以拜托他去找另一个人办事。 先上个某大佬画的图 成为事件线的条件 所有的组件对象都必须能看得到这个线对象,因此我们把这个对象放在Vue原型 这个事件线对象必须要能调用on和emit方法(线对象必须是Vue的实例化对象或是组件对象

    7630

    Vue中组件之间8中通信方式,值得收藏

    之前写了一篇关于vue面试结的文章, 有少网友提出组件之间通信方式还有很多, 这篇文章便是专门结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢 eventBus 又称为事件线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册送事件或接收事件, 所以组件都可以通知其他组件。 eventBus也有方便之处, 当项目较大,就容易造成难以维护的灾难 在Vue的项目中怎么使用eventBus来实现组件之间的数据通信呢?具体通过下面几个步骤 1. 初始化 首先需要创建一个事件线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus 一道面试题引的事件循环深入思考 公司要求使用框架vue,面试被问及哪些? ? 觉得本文对你有帮助?请分享给更多人 关注『程序员成长指北』,一起提升开技能

    23820

    相关产品

    • 云服务器

      云服务器

      云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。 腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券