Vue bus事件总线的原理与使用

这里写自定义目录标题

  • 一、 Vue Bus 总线原理
  • 二、Vue bus的使用
      • 1、创建总线: 在 Vue 应用中,可以创建一个 Vue 实例作为总线,用于管理事件。
      • 2、事件的发布与订阅: 组件通过订阅事件来监听总线上的消息,而其他组件则通过发布事件来触发消息。
      • 3、销毁总线: 在组件销毁时,应该取消对事件的订阅以防止内存泄漏。
      • 4、注意:
  • 三、Vue bus 实际应用
      • 场景
      • 示例代码

一、 Vue Bus 总线原理

Vue Bus 是一种事件总线的实现方式,用于在不同组件之间进行通信。在 Vue 应用中,父子组件通信相对简单,但当需要在非父子关系的组件之间进行通信时,就需要借助一种中央事件总线的机制,这就是 Vue Bus 的作用。
在这里插入图片描述
说白就是建一个空白的vue,里面只处理 $emit 事件发布、$on事件监听触发 以及 $off 事件销毁,来完成多层不同组件之间的通行。

二、Vue bus的使用

1、创建总线: 在 Vue 应用中,可以创建一个 Vue 实例作为总线,用于管理事件。

// bus.js
import Vue from 'vue';
export const bus = new Vue();

2、事件的发布与订阅: 组件通过订阅事件来监听总线上的消息,而其他组件则通过发布事件来触发消息。

// ComponentA.vue
import { bus } from './bus.js';

export default {
  methods: {
    handleClick() {
      bus.$emit('custom-event', 'Hello from Component A!');
    },
  },
};
// ComponentB.vue
import { bus } from './bus.js';

export default {
  mounted() {
    bus.$on('custom-event', (message) => {
      console.log(message); // Hello from Component A!
    });
  },
};

3、销毁总线: 在组件销毁时,应该取消对事件的订阅以防止内存泄漏。

// ComponentB.vue
export default {
  beforeDestroy() {
    bus.$off('custom-event');
  },
};

4、注意:

  1. bus总线的on执行先与emit
    原因:父子生命周期顺序的影响,父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
  2. bus总线的emit不适宜写在creted中,要写在mounte钩子函数中。
    原因:on是要早于emit,而且受父子生命周周期的影响,emit要写在nounted函数里。
  3. 发布事件在使用完后,记得off 注销事件,防止内存泄漏。

三、Vue bus 实际应用

场景

考虑一个购物车的应用,有一个商品列表组件和一个购物车组件,它们之间需要实现添加商品到购物车的功能。

示例代码

<!-- ProductList.vue -->
<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <p>{{ product.name }}</p>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
import { bus } from './bus.js';

export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product A' },
        { id: 2, name: 'Product B' },
        { id: 3, name: 'Product C' },
      ],
    };
  },
  methods: {
    addToCart(product) {
      bus.$emit('add-to-cart', product);
    },
  },
};
</script>
<!-- ShoppingCart.vue -->
<template>
  <div>
    <h2>Shopping Cart</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { bus } from './bus.js';

export default {
  data() {
    return {
      cartItems: [],
    };
  },
  mounted() {
    bus.$on('add-to-cart', (product) => {
      this.cartItems.push(product);
    });
  },
  beforeDestroy() {
    bus.$off('add-to-cart');
  },
};
</script>

在这个例子中,ProductList 组件通过 Vue Bus 发送了一个 ‘add-to-cart’ 事件,而 ShoppingCart 组件监听了这个事件,并在事件发生时将商品添加到购物车中。

这就是 Vue Bus 的基本原理和一个实际应用的例子。通过这种方式,不同组件之间可以更轻松地进行通信,提高了组件之间的灵活性和复用性

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(免费)双相情感障碍筛查MDQ 在线测试双向情感障碍

MDQ用于筛查双相障碍&#xff0c;主要包含13个关于双相障碍症状的是非问题&#xff0c;当前测试采用的量表为2010年杨海晨博士翻译版。该量表为目前世界范围内最常用的双相障碍筛查量表&#xff0c;目前在精神科门诊最为常用的量表之一。 双向情感障碍筛查量表&#xff0c;也叫…

Linux(多用户下)查看cuda、cudnn版本、查看已经安装的cuda版本相关命令

查看已经安装的CUDA多个版本 linux 中cuda默认安装在/usr/local目录中&#xff1a; -可以使用命令&#xff1a; ls -l /usr/local | grep cuda查看该目录下有哪些cuda版本&#xff1a; 如果输出&#xff1a; lrwxrwxrwx 1 root root 21 Dec 17 2021 cuda -> /usr/loc…

监控直流防雷浪涌保护器综合方案

监控系统是一种广泛应用于安防、交通、工业、军事等领域的信息系统&#xff0c;它通过摄像机、传输线路、监控中心等设备&#xff0c;实现对目标区域的实时监视和控制。然而&#xff0c;监控系统也面临着雷电的威胁&#xff0c;雷电可能通过直击雷、感应雷、雷电波侵入等途径&a…

React实战演练项⽬一需求分析及vite_react搭建项目

React实战演练项⽬一需求分析及项目初始化 需求分析 刚学完React,开始找项目进行上手练习&#xff01; 页面组件拆分&#xff1a; 头部&#xff1a;导航tab、搜索框、登录注册 中间&#xff1a;分类导航、轮播图、新人福利、高单价产品导航 课程分类列表、底部内容、登陆提…

当攻防演练已成常态,企业应该相信西医还是老中医?

在面对疾病时&#xff0c;很多人常常会犹豫不决&#xff0c;不知道应该选择中医还是西医进行治疗。与疾病斗争的过程也是一场“战斗”&#xff0c;需要选择合适的“武器”和策略。有些人认为西医疗效快&#xff0c;能够迅速缓解症状&#xff1b;而另一些人则认为中医治疗更根本…

m1 rvm install 3.0.0 Error running ‘__rvm_make -j8‘

在使用M1 在安装cocopods 前时&#xff0c;安装 rvm install 3.0.0遇到 rvm install 3.0.0 Error running __rvm_make -j8 备注: 该图片是借用其他博客图片&#xff0c;因为我的环境解决完没有保留之前错误信息。 解决方法如下&#xff1a; 1. brew uninstall --ignore-depe…

泛型编程 -- 模板详解

一、模板 在没有模板之前&#xff0c;如果我们写一个swap()两数交换函数&#xff0c;因为我们要支持 int 与int 交换 、double 与 double 交换等等情况&#xff0c;所以要实现swap()函数的多个重载&#xff0c;显得很繁琐&#xff0c;于是就引入了模板。 模板就是在需要模板的地…

idea一键打包docker镜像并推送远程harbor仓库的方法(包含spotify和fabric8两种方法)--全网唯一正确,秒杀99%水文

我看了很多关于idea一键打包docker镜像并推送harbor仓库的文章&#xff0c;不论国内国外的&#xff0c;基本上99%都是瞎写的&#xff0c; 这些人不清楚打包插件原理&#xff0c;然后就是复制粘贴一大篇&#xff0c;写了一堆垃圾&#xff0c;然后别人拿来也不能用。 然后这篇文…

MySQL表操作

1.创建表 创建一个表 表的字符集为utf8&#xff0c;校验规则为utf8_bin 存储引擎为MYisam 2.查看表结构 desc 表名&#xff1b; 3.查看表内容 select * from 表名&#xff1b; 4.查看数据库有几个表 show tables; 附&#xff1a;查看创建表时的语句 show create table 表名…

怎么去掉邮件内容中的回车符

上图是Outlook 截图&#xff0c;可见1指向的总有回车符&#xff1b; 故障原因&#xff1a; 不小心误按了箭头4这个选项&#xff1b; 解决方法&#xff1a; 点击2箭头确保tab展开&#xff1b; 点击3以找到箭头4. 取消勾选或者多次点击&#xff0c;即可解决。

web3资讯及远程工作

各位如果想了解区块链相关的消息可以通过如下网址了解&#xff0c;里面还会有相关职位招聘&#xff08;包括远程工作&#xff09;&#xff0c;还可以在里面进行发帖&#xff0c;进入即可获得1000积分&#xff0c;后期可以兑换一些礼品Cryptosquare

Java简介、基本语法

一、Java简介&#xff1a; Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 面向对象程序设计语言和 Java 平台的总称。 Java主要的特性&#xff1a; 1、Java语言是简单的的&#xff1a; Java语言的语法与C、C语言接近。Java丢弃了C中的一些特性&#xff0c;如操…

android 数独小游戏 经典数独·休闲益智

一款经典数独训练app 标题资源下载 &#xff08;0积分&#xff09;https://download.csdn.net/download/qq_38355313/88544810 首页页面&#xff1a; 1.包含有简单、普通、困难、大师四种难度的数独挑战供选择&#xff1b; 记录页面&#xff1a; 1.记录用户训练过的数独信息&…

HT8313 D/AB切换 音频功率放大器

HT8313具有AB类和D类的自Y切换功能&#xff0c;在受到D类功放EMI干扰困扰时&#xff0c;可随时切换至AB类音频功放模式&#xff08;此时电荷泵升压功能关闭&#xff09;。 HT8313内部固定28dB增益&#xff0c;内置的关断功能使待机电流Z小化&#xff0c;还集成了输出端过流保护…

“说”出一个UI原型稿:来自北邮课堂的一款文心应用

在2023年秋季学期&#xff0c;北京邮电大学联合百度飞桨&#xff0c;设计了“文心一言X产品设计”的集训营主题&#xff0c;并融入到了“移动交互设计”的课程中。在完成结业作业的过程中&#xff0c;同学们将基于文心一言开展产品原型设计与初步开发。 众所周知&#xff0c;产…

容性负载箱与电容器的关系是什么?

容性负载箱用于测试电容器性能的设备&#xff0c;电容器是储存电能的元件&#xff0c;具有储存和释放电荷的能力。容性负载箱通过对电容器施加不同的负载&#xff0c;可以测量电容器的容量、电压响应、损耗等参数。 容性负载箱与电容器的关系主要体现在以下几个方面&#xff1a…

外贸自建站怎么做?做外贸要怎样建设网站?

外贸自建站如何建立&#xff1f;海洋建站的具体步骤有哪些&#xff1f; 通过建立自己的外贸网站&#xff0c;您可以更好地展示公司的产品和服务&#xff0c;吸引更多的潜在客户&#xff0c;提高品牌知名度&#xff0c;拓展海外市场。那么&#xff0c;如何建立一个成功的外贸自…

系列三、GC垃圾回收【总体概览】

一、GC垃圾回收【总体概览】 JVM进行GC时&#xff0c;并非每次都对上面的三个内存区域&#xff08;新生区、养老区、元空间/永久代&#xff09;一起回收&#xff0c;大部分回收的是新生区里边的垃圾&#xff0c;因此GC按照回收的区域又分为了两种类型&#xff0c;一种是发生在新…

6块钱改变世界,网易和拼多多踏入同一条河流?

年底将至&#xff0c;各种颁奖盛典星光熠熠。如果要给今年深蹲反弹中的互联网大厂颁奖&#xff0c;2023表现最突出的可能是师出同门的兄弟网易和拼多多。 从市场表现来看&#xff0c;两家企业录得今年互联网中概股最高涨幅&#xff0c;被称为“中概股之光”&#xff1a;2023年…

移动硬盘打不开?正确操作方法分享!

“我的移动硬盘用了好几年了&#xff0c;但是不知道为什么&#xff0c;最近每次把移动硬盘插入电脑都显示无法打开。我还有一些很重要的数据在里面呢&#xff0c;有什么比较好的方法可以解决这个问题吗&#xff1f;” 作为一个便捷的存储工具&#xff0c;移动硬盘给我们带来了很…