vue的eventBus

最新推荐文章于 2024-09-17 11:26:17 发布

weixin_34357887

最新推荐文章于 2024-09-17 11:26:17 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1rookie/p/8568744.html

版权

首先在main.js中

Vue.prototype.$eventBus = new Vue()

A组件中通过触发事件或者其他什么，然后发射数据

this.$eventBus.$emit('key','data-1232131232132131232');

B组件中接收A组件的数据

this.$eventBus.$on('key',function(params){ console.log(params); // data-1232131232132131232 });

转载于:https://www.cnblogs.com/1rookie/p/8568744.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34357887

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue通信 Prop，EventBus，provide / inject，storage，Vuex

weixin_42181341的博客

07-21

287

vue通信的几种方法Prop，EventBus，provide / inject，storage，Vuex

vue eventBus实现原理，你没看懂算我输

weixin_39168678的博客

12-13

1万+

刚开始拿到eventBus的时候很幼稚的想，用一个全局vue对象充当数据容器，那为什么不用一个全局的map就可以 window.busMap = {} 组件a pd: window.busMap.a, &lt;template&gt; &lt;div&gt;{{pd}}&lt;/div&gt; &lt;/template&gt; 组件b created () {

参与评论您还未登录，请先登录后发表或查看评论

Vue中的Event Bus

AlegFox的博客

04-21

471

在Vue中，使用event bus是一种常见的实现组件间通信的方法。Event bus是一个空的Vue实例，用于在应用程序内部传递事件。本篇博客将介绍如何创建和使用Vue event bus。

Vue实战指南：Vue中EventBus的使用方法

热门推荐

Annie的博客

07-01

2万+

在全局定义，全项目通讯

Vue的eventBus-事件总线

Hi~豆豆麻麻

10-08

338

在Vue中，组件之间的数据传递一般都是父子组件传递数据，但是在项目的实际应用当中，也存在没有关系的组件也需要传递数据，此时就不能用父子传递数据那样用props/emit的方法来实现。这个时候可以使用eventBus来实现。 eventBus相当于一个全局的事件的仓库，任何一个组件都可以去获取这个事件。使用方式如下：我们一个demo，有两个毫无关系的A组件和B组件，现在B组件想要使用A组件中的数据，我们可以这样使用-------- Step1 初始化我们可以在utils目录中创建一个eventBu.

Vue中 EventBus 的使用，如何实现Vue中的EventBus

程邓楠的博客

02-20

1万+

vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...

Vue EventBus自定义组件事件传递

12-09

组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为...

详解vue 组件之间使用eventbus传值

01-21

对于前端的我们而言，并非是只有写界面才是最大的问题，很多的...，（我们也不讨论已经废除的vm.$dispatch）很多情况下我们都是需要一个事件的捕获，这时候我们就可以用到vue的eventbus了受用eventbus的方法很是简单

vue中eventbus被多次触发以及踩过的坑

01-19

一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，...关于vue中的eventbus的使用，我之前在一篇vue中的数据传递中有提到过。先给你们看一下我一开始的

vue组件通信必知必会——事件总线Event Bus

Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~

05-15

3220

主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。

Vue事件总线（EventBus）使用指南：详细解析与实战应用

在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。

05-31

1万+

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即EventBus来通信。EventBus 又称为事件总线。

vue中EventBus的基本使用

wzuof的博客

10-14

3709

前言 vue组件中父子组件通信，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。两个页面没有任何引入和被引入关系，该如何通信？使用EventBus即可。 1.建立一个eventBus.ts(或者js文件) import Vue from 'vue' export default new Vue() 2.传递值的页面 import EventBus from "@/components/EventBus"; EventBus.$emit('sea

什么是Vue中的事件总线机制（EventBus）

bug处理进行时

06-06

2739

Vue事件总线机制 - EventBus 事件总线产生的背景在vue中最核心的部分就是组件，组件间的通信就是重中之重。通信分为父子组件通信、兄弟组件通信、不相干的组件通信等等多种方式。父级向子级通过props传递数据，子级通过 $emit 向父组件通知事件。但是当两个毫不相关的组件互相通信时应该通过什么来实现呢？ EventBus的简介 EventBus 又称时间总线，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以

什么是Redux？它的核心概念有哪些？

07-24

597

引言Redux 核心概念Store（仓库）State（状态）Action（动作）Reducer（规约器）安装与初始化示例代码示例一：定义 Action示例二：编写 Reducer示例三：合并 Reducers示例四：连接 Store 和组件功能使用思路1. 状态管理2. 异步操作3. 模块化和可测试性实际工作中的使用技巧结语return {return {Redux 为复杂的前端应用提供了一套强大而灵活的状态管理方案。

vue eventBus的基本使用

rose999ying的博客

06-19

828

1、demo目录结构： 2、common/config.js /* 推荐使用 EVENT_NAME_FOOD 而不是 EVENT_NAME = { FOOD: 'food' } 因为如果删除EVENT_NAME_FOOD, webpack会有提示而如果删除 EVENT_NAME.FOOD, webpack不会提示 */ export ...

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

aaaa123456789111的博客

07-19

2929

vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件，如图：废话不多说，直接开始使用EventBus要用EventBus，首先要初始化一个EventBus，这里称它为全局事件总线。第二种初始化方

vue 使用事件总线进行组件间通信

buling吖的博客

08-13

使用事件总线进行组件间通信时，传值成功但是页面渲染出来并没有变化 // 组件 A 向组件 B 传值 // Msg.js import Vue from 'vue' export const EventBus = new Vue() // 组件A <template> <div>组件 A</div> <input type="text" :value="message"> </template> <script> impo

vue eventbus

08-15

Vue.js 中的 EventBus 是一种用于在组件之间进行通信的机制。它允许你在不同的组件中发送和接收事件，以实现组件之间的解耦和交互。在 Vue.js 中使用 EventBus，你需要创建一个中央事件总线（EventBus）实例，它可以作为一个简单的 Vue 实例来充当事件中心。你可以在任何组件中引用该实例，并使用它来发送和接收事件。以下是一个简单的 EventBus 的实现示例： 1. 创建 EventBus 实例： ```javascript // EventBus.js import Vue from 'vue'; export const EventBus = new Vue(); ``` 2. 在发送事件的组件中使用 EventBus： ```javascript // ComponentA.vue import { EventBus } from './EventBus.js'; export default { methods: { sendData() { // 发送名为 'eventA' 的事件，并传递数据 EventBus.$emit('eventA', data); } } } ``` 3. 在接收事件的组件中使用 EventBus： ```javascript // ComponentB.vue import { EventBus } from './EventBus.js'; export default { created() { // 监听名为 'eventA' 的事件 EventBus.$on('eventA', this.handleEventA); }, methods: { handleEventA(data) { // 处理接收到的事件和数据 console.log('Received eventA:', data); } } } ``` 通过上述步骤，ComponentA 可以通过发送名为 'eventA' 的事件，并传递数据，而 ComponentB 则可以通过监听 'eventA' 事件来接收并处理数据。这样，两个组件之间就可以进行通信了。注意：为了避免内存泄漏，记得在组件销毁前取消对事件的监听，即在组件的 `beforeDestroy` 生命周期钩子中使用 `EventBus.$off('eventA')` 来取消监听。