Vue EventBus 的使用(初步学习)

最新推荐文章于 2025-03-26 14:10:49 发布
最新推荐文章于 2025-03-26 14:10:49 发布
阅读量473 收藏 8
点赞数 7
分类专栏： 前端学习笔记 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45608414/article/details/136473908
版权
本文介绍了如何在Vue项目中使用事件总线进行非父子组件间的通信，包括创建EventBus.js、设置监听和发送事件，以及Vuex的推荐使用场景。通过实例演示了组件间消息传递的正确使用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  在Vue项目开发中,组件通信是经常用到的,除了常见的父子组件通信之外,Vue还有事件总线机制,用于非父子组件的通信(如果一个信息被很多组件使用,还是推荐 Vuex).

  下面我们看一下具体用法:

  1. 创建EventBus.js文件

     
  2. 创建接收方组件busA, 引入EventBus, 并且监听EventBus事件.
  3. 创建发送方组件busB, 引入EventBus, 并且创建发送事件
  4.  将上面两个组件引入需要使用的页面中(因为是学习用的项目,我们这里引入到App.vue)
    组件使用步骤: 引入-->注册-->使用.

     

  5. 我们打开控制台并点击发送方按钮 ,查看组件busA是否能接收到消息.

    组件能接受到证明我们的使用方法是正确的的.
     
  6.   最后提一句:发送方所注册的发送事件,任何一个监听该事件并且引入EventBus的组件都能接收到他发送的消息.
      举例:创建一个组件C,引入EventBus,并且监听上面busB中的'sendMsg'事件,就能和busA同时接收到该事件传送的消息.
     
vue组件间通信 — eventBus 的使用
温情
06-19 553
其实就是发布订阅者： emit（触发，也就是发布），on（监听，也就是订阅） 直接上案例； 一、先创建一个 eventBus.js 文件 文件名字随意，位置随意。我是在 src 目录下 创建了个 utils 文件夹，下面新建一个 eventBus.js eventBus.js代码 import Vue from 'vue'; export default new Vue(); 二、在需要用到 eventBus 的组件中引入 eventBus.js 三、Bus.$emit() 发布Bus消息的组件 .
阿里前端常考vue面试题汇总
bb_xiaxia1998的博客
02-27 370
题目分析回答范例实现我们可以像下面这样简单实现和，从而辨别两者不同 如何在组件中批量使用Vuex的getter属性 使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中 Vue组件之间通信方式有哪些 组件传参的各种方式组件通信常用方式有以下几种根据组件之间关系讨论组件通信最为清晰有效1. 父子组件通信父组件模板: 子组件模板: 回调函数（callBack）父传子：将父组件里定义的作为传入子组件 子组件向父组件通信父组件模板: 子组件模板: 2. provide
Vue中 EventBus 的使用
lannieZ的博客
06-15 1652
vue子组件之间的传值
Vue2 组件通信终极指南：深入理解 EventBus、Vuex 和 Provide/Inject
最新发布
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
03-26 1071
不同的场景需要不同的通信方式，合理选择能提升代码的。接下来，我们结合实际场景，对不同方式进行详细讲解。无法满足需求（如兄弟组件通信），可以使用。依赖 Vue2 API，在 Vue3 被。，详细讲解每种方法的优缺点和最佳使用场景。适用范围较小，仅适合透传数据的情况。不能跨组件，嵌套过深时会导致。兄弟组件通信，无需父组件中转。不同的通信方式适用于不同场景，在 Vue2 组件开发中，直接的父子通信，简单直观。需手动管理事件，可能导致。组件封装，避免手动定义。层级太深时，可以使用。，但不想手动定义每个。
vue里面使用EventBus（事件总线）
qq_44552416的博客
09-25 1834
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担方便易用：只需要引入mitt并配置即可使用支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue应用场景：组件通信。
什么是Redux？它的核心概念有哪些？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-24 726
引言Redux 核心概念Store（仓库）State（状态）Action（动作）Reducer（规约器）安装与初始化示例代码示例一：定义 Action示例二：编写 Reducer示例三：合并 Reducers示例四：连接 Store 和组件功能使用思路1. 状态管理2. 异步操作3. 模块化和可测试性实际工作中的使用技巧结语return {return {Redux 为复杂的前端应用提供了一套强大而灵活的状态管理方案。
eventBus在vue中的使用
热门推荐
Annie的博客
07-01 2万+
在全局定义，全项目通讯
前端常见vue面试题（必备）
bb_xiaxia1998的博客
03-01 317
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1513
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
使用VueCLI3搭建外卖类点餐项目的基本框架
# 1. VueCLI3简介 ## 1.1 VueCLI3概述 VueCLI3是一个官方发布的用于快速搭建Vue.js项目的...要安装VueCLI3，首先确保已安装Node.js（推荐使用LTS版本）。然后通过npm安装VueCLI3： ```bash npm install -g @vue/cli `
使用Vue2.x进行API数据请求和数据处理
- **响应式数据绑定**：Vue2.x通过使用响应式系统，实现了数据和视图之间的自动同步更新。当数据发生变化时，视图会自动更新，这使得开发人员可以专注于数据的处理，而无需手动操作DOM。 - **组件化
Vue事件总线（EventBus）使用指南：详细解析与实战应用
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-31 2万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
vue--------eventBus使用
bidepanm的博客
07-10 321
实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。 main.js: import globalBus from '@/components/globalBus/index.js'; // 全局的eventBus Vue.prototype.globalBus = globalBus; 新建globalBus/index.js: /** * @namespace global * 全局事件命名规则必须是 global+moduleName +
vue 事件总线的用法（EventBus）
llj1028的博客
02-14 1001
vue事件总线（EventBus）的使用
vue中EventBus的基本使用
wzuof的博客
10-14 3794
前言 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使用
Fisher_yu01的博客
05-27 571
vue的eventBus 首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么，然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 this.$eventBus.$on('key',function(...
vue中eventBus的使用方法
m0_49494051的博客
09-25 292
1.建立一个eventBus.ts(或者js文件) import Vue from 'vue' export default new Vue() 2.有值的页面 import eventBus from 'eventBus' eventBus.$emit('updateName', 值) 3.需要传过来值的页面 import eventBus from 'eventBus' eventBus.$on('updateName', (e)=>{ //e为此值 this.name = e ) .
vue中eventBus的使用
gba3455的博客
11-10 531
eventbus的使用
Vue中 eventBus 的使用
小火车况且况且况且的博客
09-10 427
EventBus事件总线 1.创建EventBus //新建一个eventBus.js的文件 代码如下 import Vue from "vue"; export default new Vue(); 文件位置没有特殊要求 2.需要存储值的地方 2.1.首先引入 2.2 使用 3. 接受监听 // 引入 import eventBus from "./eventBus" ... // 使...
Vue中 事件总线（eventBus）详解及使用
明天也要努力的博客
03-06 1万+
传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门：Vue状态管理器（vuex）详解及应用场景 传送门：Vue中 $ attrs、$ listeners 详解及使用 1. 简介 Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？ 如果应用程序不需要类似 Vuex 这样的库来处理组件之
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值