Vue学习计划-Vue2--VueCLi(五)全局事件总线、消息订阅与发布(pubsub)

抛出问题:我们多级组件,或者任意不想关的子组件如何传递数据呢?

1. 全局事件总线($bus

  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 全局事件总线示意图:
    在这里插入图片描述

  3. 安装全局事件总线:

new Vue({....beforeCreate(){Vue.prototype.$bus = this // 安装全局事件总线,$bus就相当于vm}
})
  1. 使用事件总线:
    1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
    methods: {demo(data){.....}
    },
    mounted(){this.$bus.$on('xxx', this.demo)
    }
    
    1. 提供数据: this.$bus.$emit('xxx', 数据)
  2. 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件

示例:我们继续使用Vue学习计划-Vue2–VueCLi(四)组件传值和自定义事件示例中的4个组件:父组件APP.vue,子组件SelectInput.vueSelectList .vueSelectMulDel.vue,我们这里只更拿App.vueSelectInput.vue为例
1. 在main.js中安装全局事件总线:

2. 子组件SelectInput.vue内提供数据:
在这里插入图片描述
3. 父组件App.vue内给$bus绑定事件,并在beforeDestroy中销毁绑定事件:
在这里插入图片描述

2. 消息订阅与发布(pubsub

  1. 一种组件间通信的方式,适用于任意组件间通信
  2. 使用步骤:
    1. 安装pubsub: npm i pubsub-js或者yarn add pubsub-js或者cnpm i pubsub-js
    2. 引入: import PubSub from 'pubsub-js'
    3. 接收数据: A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
    methods: {demo(data){.....}
    },
    mounted(){this.pid = PubSub.subscribe('xxx', this.demo) // 订阅消息
    }
    
    1. 提供数据: PubSub.publish('xxx', 数据)
    2. 最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅

示例:拿$busApp.vueSelectInput.vue为:

  1. 安装依赖;不需要main.js内写任何内容,但是需要在用到订阅发布的依赖组件内手动引入

  2. 修改SelectInput.vue组件:
    在这里插入图片描述

  3. 修改App.vue组件:
    在这里插入图片描述

  4. 总结一下:其实不管是全局事件总线还是消息订阅与发布,我们都可以看出来,其实本质都是一样的:将自定义事件和数据存到一个公共的空间内,谁用谁去调。

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

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

相关文章

无人机高空巡查+智能视频监控技术,打造森林防火智慧方案

随着冬季的到来,森林防火的警钟再次敲响,由于森林面积广袤,地形复杂,且人员稀少,一旦发生火灾,人员无法及时发现,稍有疏忽就会酿成不可挽救的大祸。无人机高空巡查智能视频监控是一种非常有效的…

MySQL如何进行Sql优化

(1)客户端发送一条查询语句到服务器; (2)服务器先查询缓存,如果命中缓存,则立即返回存储在缓存中的数据; (3)未命中缓存后,MySQL通过关键字将SQ…

19.(vue3.x+vite)v-if和v-for哪个优先级更高

前端技术社区总目录(订阅之前请先查看该博客) v-if和v-for哪个优先级更高 (1)实践中不应该把v-for和v-if放一起,可以包一层template (2)在vue2中,v-for的优先级是高于v-if (3)在vue3中,v-for的优先级是低于v-if 组件代码 <template><div><!--包一…

Hazel引擎学习(十二)

我自己维护引擎的github地址在这里&#xff0c;里面加了不少注释&#xff0c;有需要的可以看看 参考视频链接在这里 这是这个系列的最后一篇文章&#xff0c;Cherno也基本停止了Games Engine视频的更新&#xff0c;感觉也差不多了&#xff0c;后续可以基于此项目开发自己想要…

树莓派,opencv,Picamera2利用舵机云台追踪人脸

一、需要准备的硬件 Raspiberry 4b两个SG90 180度舵机&#xff08;注意舵机的角度&#xff0c;最好是180度且带限位的&#xff0c;切勿选360度舵机&#xff09;二自由度舵机云台&#xff08;如下图&#xff09;Raspiberry CSI 摄像头 组装后的效果&#xff1a; 二、项目目标…

数据结构与算法—排序算法(一)时间复杂度和空间复杂度介绍

排序算法 文章目录 排序算法1.排序算法的介绍1.1 排序的分类 2.算法的时间复杂度2.1 度量一个程序(算法)执行时间的两种方法2.2 时间频度2.2.1 忽略常数项2.2.2 忽略低次项2.2.3 忽略系数 2.3 时间复杂度2.3.1 常见的时间复杂度2.3.1.1 常数阶 O ( 1 ) O(1) O(1)2.3.1.2 对数阶…

Excel高效办公:文秘与行政办公的智能化革新

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f91f; 代理 IP 推荐&#xff1a;&#x1f449;品易 HTTP 代理 IP &#x1f485; 想寻找共同学习交流的小伙伴&#xff0c…

Java版本+鸿鹄企业电子招投标系统源代码+支持二开+Spring cloud +鸿鹄电子招投标系统

​项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。为了符合国家电子招投标法律法规及相关规范&#xff0…

java设计模式学习之【代理模式】

文章目录 引言代理模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用图片加载示例代码地址 引言 在现实生活中&#xff0c;我们经常使用代理来处理我们不想直接参与或无法直接参与的事务&#xff0c;例如&#xff0c;使用律师来代表法庭上的案件。在软件开发…

克隆图[中等]

一、题目 给你无向 连通 图中一个节点的引用&#xff0c;请你返回该图的 深拷贝&#xff08;克隆&#xff09;。图中的每个节点都包含它的值val&#xff08;int&#xff09;和其邻居的列表list[Node]。 class Node {public int val;public List<Node> neighbors; }测试…

计算机如何看待内存

计算机如何看待内存&#xff1b; 对象在内存中如何表示&#xff0c;如何操纵对象&#xff1b;

使用 Axios 进行网络请求的全面指南

使用 Axios 进行网络请求的全面指南 本文将向您介绍如何使用 Axios 进行网络请求。通过分步指南和示例代码&#xff0c;您将学习如何使用 Axios 库在前端应用程序中发送 GET、POST、PUT 和 DELETE 请求&#xff0c;并处理响应数据和错误。 准备工作 在开始之前&#xff0c;请…

Java 反射:探索运行时行为的强大工具

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、浅层理解 1.1 定义 1.2 我的理解 二、反射基础与应用 2.1 反射基础 2.2 反射的高级应用 三、一些反射的例子 3.1 获取类…

GitHub帐户管理更改电子邮件

登录到您的 GitHub 帐户&#xff1a; 前往 GitHub 网站并使用您的凭据登录。 访问个人设置&#xff1a; 单击右上角的您的头像&#xff0c;然后选择“Settings”&#xff08;设置&#xff09;。 选择电子邮件选项卡&#xff1a; 在左侧边栏中选择“Emails”&#xff08;电子邮…

快速入门Tailwind CSS:从零开始构建现代化界面

快速入门Tailwind CSS&#xff1a;从零开始构建现代化界面 介绍 Tailwind CSS 是一个以原子类的方式快速构建界面的 CSS 框架。它提供了丰富的预定义类&#xff0c;使得开发者能够快速构建样式和布局。 安装和设置 首先&#xff0c;我们需要在项目中安装 Tailwind CSS。可以…

CSS特效030:日蚀动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

Docker知识点整理

Docker和虚拟机技术的区别&#xff1a; 传统的虚拟机&#xff0c;可以虚拟出一条硬件&#xff0c;运行一个完整的操作系统&#xff0c;在这个操作系统上安装和运行所需的软件 容器内的应用可以直接运行在宿主 主机的内核中&#xff0c;容器没有自己的内核&#xff0c;也不用虚…

【桌面应用开发】Tauri是什么?基于Rust的桌面应用

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

网络基础(十):DHCP原理与配置

目录 1、DHCP的概念 2、使用DHCP的优势 3、DHCP的分配方式 4、可分配的地址信息 5、DHCP的工作原理&#xff08;租约过程&#xff09; 6、DHCP动态配置主机地址&#xff08;使用eNSP软件配置&#xff09; 1、DHCP的概念 DHCP(Dynamic HostConfiguration Protocol&#x…

树莓派,opencv,Picamera2利用舵机云台追踪特定颜色对象

一、需要准备的硬件 Raspiberry 4b两个SG90 180度舵机&#xff08;注意舵机的角度&#xff0c;最好是180度且带限位的&#xff0c;切勿选360度舵机&#xff09;二自由度舵机云台&#xff08;如下图&#xff09;Raspiberry CSI 摄像头 组装后的效果&#xff1a; 二、项目目标…