Vue中的全局事件总线:EventBus与$bus的比较详解与实战应用

  1. EventBus实例:

    • var EventBus = new Vue() 会创建一个名为EventBus的Vue实例,并将其存储在变量EventBus中。
    • Vue.prototype.$bus = new Vue() 则直接在Vue的原型上创建一个新的Vue实例,并将其赋值给$bus属性。
  2. 使用方式:

    • var EventBus = new Vue() 的方式需要你手动导入EventBus实例到需要使用的组件中。
    • Vue.prototype.$bus = new Vue() 的方式则无需手动导入,因为$bus已经成为Vue原型的一部分,你可以在任何组件中直接使用this.$bus来访问该实例。
  3. 作用域和生命周期:

    • var EventBus = new Vue() 创建的EventBus实例的生命周期由你手动管理,需要在适当的时候进行销毁。
    • Vue.prototype.$bus = new Vue() 创建的$bus实例则随着Vue应用的生命周期一起管理,当Vue实例被销毁时,$bus实例也会被销毁。

因此,虽然这两种方式都可以实现全局事件总线的功能,但在使用上有一些细微的差别。Vue.prototype.$bus = new Vue() 更加简洁和方便,特别适合在Vue项目中实现全局事件总线的需求。


EventBus实例 

创建一个名为EventBus的Vue实例(/utils/event-bus.js)

import Vue from 'vue'

export const EventBus = new Vue()

在A组件中的使用

<button @click="sendMsg">按钮</button>

 // 导入EventBus

import { EventBus } from '@/utils/event-bus.js'

sendMsg() {

// 发送名为'sendMsg'的事件,可以携带额外的数据

   EventBus.$emit('sendMsg', 'hello')

}

在B组件中的使用

 // 导入EventBus

import { EventBus } from '@/utils/event-bus.js'

created() {

// 监听名为'sendMsg'的事件

EventBus.$on('sendMsg', (msg) => {

// 处理接收到的事件数据

      this.msg = msg

})

},

beforeDestroy() {

// 在组件销毁前取消事件监听,以避免内存泄漏

    EventBus.$off('sendMsg')

}


$bus实例

var EventBus = new Vue();

这一行代码创建了一个名为 EventBus 的新的 Vue 实例。这个实例将作为我们的事件总线,用于在 Vue 组件之间进行事件通信。
Object.defineProperties(Vue.prototype, { $bus: { get: function () { return EventBus } } })

这段代码使用 Object.defineProperties 方法将 $bus 属性添加到 Vue 的原型上。
定义了 $bus 属性的 get 方法,当我们在组件中使用 this.$bus 访问时,实际上是在获取 EventBus 这个 Vue 实例。

通过在 main.js 中执行这段代码,我们就可以在整个 Vue 应用中使用 this.$bus 来访问事件总线实例,方便地实现组件之间的事件通信。


$bus实例(简洁版)

在 main.js 中添加 $bus:

在 Vue 应用的入口文件 main.js 中添加以下代码:

import Vue from 'vue';

// 创建一个全局的事件总线并挂载到 Vue 原型上
Vue.prototype.$bus = new Vue();

发送事件:

在任何组件中,可以使用 this.$bus.$emit 发送事件。例如:

export default {
  methods: {
    handleClick() {

// 发送名为 'custom-event' 的事件,可以携带额外的数据
      this.$bus.$emit('custom-event', eventData);
    }
  }
};

监听事件:

在需要监听事件的组件中,使用 this.$bus.$on 方法监听事件。例如:

export default {
  created() {

// 监听名为 'custom-event' 的事件
    this.$bus.$on('custom-event', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {

// 处理接收到的事件数据
      console.log('Received custom event:', data);
    }
  },
  beforeDestroy() {

// 在组件销毁前取消事件监听,以避免内存泄漏
    this.$bus.$off('custom-event', this.handleCustomEvent);
  }
};

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 结合 JavaScript 对 Web 控件进行数据输入验证

目录 关于数据验证 范例运行环境 验证设计 JavaScript 方法 设计 实现 调用示例 C# 方法 设计 实现 调用示例 小结 关于数据验证 在 Web 应用的录入界面&#xff0c;数据验证是一项重要的实现功能&#xff0c;数据验证是指确认 Web 控件输入或选择的数据&#xff…

类对象作为类成员

在C中&#xff0c;类对象可以作为另一个类的成员变量。这种设计方式可以用于创建复杂的对象结构&#xff0c;使得一个类的对象能够包含另一个类的对象。这种嵌套类的组合方式可以增强代码的可重用性和模块化。 类对象作为类成员的示例 让我们通过一个示例来解释这一概念。假设…

武汉信息系统建设和服务能力评估CS认证咨询

很多企业在咨询信息系统建设和服务能力评估的时候喜欢百度搜索&#xff0c;不管是本地咨询机构还是外地咨询机构只要价格便宜就找谁&#xff0c;这个在低等级的CS1是可以这么操作的&#xff0c;一旦上升到CS2级别及以上的&#xff0c;我们一般不推荐找外地咨询机构&#xff0c;…

【文末附gpt升级方案】字节跳动发布豆包大模型:AI领域的革新与引领

随着科技的飞速进步&#xff0c;人工智能&#xff08;AI&#xff09;已逐渐成为推动社会发展的重要力量。在这一背景下&#xff0c;字节跳动公司以其前瞻性的眼光和创新能力&#xff0c;于XXXX年XX月XX日正式发布了豆包大模型&#xff0c;这一举动无疑在AI领域掀起了新一轮的浪…

C语言.动态内存管理

动态内存管理 1.为什么要有动态内存分配2.malloc和free2.1malloc2.2free 3.calloc和realloc3.1calloc3.2realloc 4.常见的动态内存管理的错误4.1对NULL指针解引用操作4.2对动态开辟空间的越界访问4.3对非动态开辟内存使用free释放4.4使用free释放一块动态开辟内存的一部分4.5对…

军训中的美差

大学时候的军训是在二年级秋季开学前进行的&#xff0c;地点是在河北的某部队。 军训时候的分班是按照学号重新划分的&#xff0c;我的学号在大学宿舍八个人中排最后&#xff0c;恰好就和其他宿舍的人分在了一个班。训练正步走的时候&#xff0c;站在我左边的那个哥们&#xf…

Signal 即将成为JavaScript的一部分

什么是响应性&#xff1f; 在过去的几年中&#xff0c;响应性成为了所有现代前端框架以及React库的核心。 对于不熟悉前端开发的人来说&#xff0c;起初这可能是一个令人困惑的概念&#xff0c;因为它改变了常规的、自上而下的、从调用者到被调用者的顺序工作流。 在响应性范…

AR系列路由器配置VLAN间通信

AR路由器是华为公司推出的企业级路由器产品系列&#xff0c;具有高可靠性、高性能和易管理等特点。AR 系列路由器提供的功能包括路由转发、安全接入、语音、视频、无线等多种业务&#xff0c;支持各种接入方式和协议&#xff0c;并且可以方便地进行扩展和升级。 实验拓扑图&…

微信小程序介绍

一、微信小程序概述 微信小程序是一种不需要下载、安装即可使用的应用&#xff0c;用户只需扫一扫或搜一下即可打开。它实现了应用触手可及的梦想&#xff0c;降低了应用的使用门槛。微信小程序自2017年1月上线以来&#xff0c;已经吸引了大量开发者加入&#xff0c;构建了一个…

【全开源】云界旅游微信小程序(源码搭建/上线/运营/售后/维护更新)

开启您的云端旅行新体验 一、引言 在快节奏的现代生活中&#xff0c;旅行成为了人们放松身心、探索世界的重要方式。让您的旅行更加便捷、高效&#xff0c;打造了云界旅游小程序&#xff0c;带您领略云端旅行的无限魅力。 二、小程序功能概览 云界旅游小程序集成了丰富的旅游…

【代码随想录算法训练营第37期 第九天 | LeetCode28. 实现 strStr()、459.重复的子字符串】

代码随想录算法训练营第37期 第九天 | LeetCode28. 实现 strStr()、459.重复的子字符串 一、28. 实现 strStr() 解题代码C&#xff1a; class Solution { public:void getNext(int* next, const string& s) {int j 0;next[0] 0;for(int i 1; i < s.size(); i) {whi…

【Maven】Nexus私服简介_下载安装_登录

1、简介 1.1介绍 Nexus私服&#xff0c;也被称为Maven仓库管理器&#xff0c;是许多公司在自己的局域网内搭建的远程仓库服务器。提供了强大的仓库管理功能和构件搜索功能&#xff0c;使得开发人员能够更方便地管理和使用Maven项目中的依赖库。 1.2作用 内网访问&#xff1…

Python代码:七、小数化整数

1、题目 日常生活中我们会遇到很多小数&#xff0c;但是有的人不喜欢小数&#xff0c;因此会用四舍五入的方式将其去掉。在Python中我们更加简单&#xff0c;可以利用强制类型转换将小数转变成整数&#xff0c;请你试一试。 2、代码 import sysn float(input()) print(int(…

微服务(Spring Clould)--Nacos的安装、配置

简介&#xff1a;&#xff08;取自官网&#xff09; Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了…

<sa8650>QCX Usecase 使用详解—什么是可剪枝节点属性以及何时使用

<sa8650>QCX Usecase 使用详解—什么是可剪枝节点属性以及何时使用 用例剪枝可实现光流设计分段(节点和目标缓冲区),这些分段实现了共享的逻辑接口,而这些接口的实现可能会发生冲突,但不会重复流水线。例如,overridesettings.txt 中的 enableAutoNoIPE=FALSE。 在 /qc…

《表格革命:数据可视化的力量与创新》

在当今数字化的时代&#xff0c;表格已不再是简单的罗列工具&#xff0c;而是一场正在悄然兴起的革命&#xff01; 表格&#xff0c;这个看似平凡无奇的存在&#xff0c;却在各个领域发挥着至关重要的作用。无论是商业数据分析中精准呈现销售趋势和市场动态&#xff0c;还是学…

React 第三十七章 Scheduler 最小堆算法

在 Scheduler 中&#xff0c;使用最小堆的数据结构在对任务进行排序。 // 两个任务队列 var taskQueue: Array<Task> []; var timerQueue: Array<Task> [];push(timerQueue, newTask); // 像数组中推入一个任务 pop(timerQueue); // 从数组中弹出一个任务 time…

【深入理解MySQL的索引数据结构】

文章目录 &#x1f4d5;索引底层数据结构与算法&#x1f4d9;索引数据结构&#x1f4d8;二叉树&#x1f4d8;红黑树&#x1f4d8;Hash&#x1f4d8;B-Tree&#x1f4d8;BTree &#x1f4d9;表在不同存储引擎的存储结构&#x1f4d8;MyISAM存储引擎索引实现&#x1f4da;文件结构…

C语言如何创建⼀个动态链表?

一、问题 创建动态链表就是指在程序执⾏过程中&#xff0c;从⽆到有&#xff0c;按照需求开辟结点和输⼊各结点数据&#xff0c;并建⽴起前后相连接的关系。那么&#xff0c;如何创建动态链表呢&#xff1f; 二、解答 以建⽴⼀个有任意名学⽣数据的单向动态链表为例&#xff0…

使用mysql主从热备+keepalived服务+ipvsadm工具 实现 mysql高可用主备+负载均衡

目录 1、工作原理 2、环境准备 3、分别在主服务器和备用服务器上安装keepalived和ipvsadm 4、修改keepalived服务的配置文件 4.1 修改主服务器上的keepalive服务的配置文件 4.2 修改备用服务器上的keepalive服务配置文件 5、编写mysql监控脚本放到主服务器上 6、在主服…