vue中$bus全局事件总线

1.介绍

说明:Vue中,$bus 指的通常是一个全局事件总线,它是一种用于在不同组件之间进行通信的模式。它允许你在一个组件中发出事件,而其他组件可以监听并响应这些事件。

2.main.js

说明:为什么在beforeCreate钩子函数添加是应为此时的实例还没有创建完成;而created钩子函数实例已经创建完成了。其实就是一个顺序问题,在 data中声明的属性会在实例创建的过程中被初始化,并且能够被 Vue 实例的其他部分访问和修改。本质是created钩子函数执行后,就不会遍历data,然后就不是一个响应式的了。 

new Vue({render: (h) => h(App),router,// 注册仓库,组件的身上会多个一个属性$storestore,beforeCreate() {// 全局事件总线Vue.prototype.$bus = this;},
}).$mount("#app");

3.兄弟组件1

说明:通知兄弟组件

// 通知兄弟组件清除关键字了
this.$bus.$emit("clearKeyword");

4.兄弟组件2

说明:在mounted钩子函数使用是因为 Vue 组件实例已经被挂载到 DOM 上,并且可以进行真实 DOM 元素的操作和初始化。

  mounted() {//通过全局事件总线清楚关键字this.$bus.$on("clearKeyword", () => {this.keyword = "";});},

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

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

相关文章

@RequestHeader使用

RequestHeader 请求头参数的设置 GetMapping("paramTest/requestHeader")public String requestHeaderTest(RequestHeader("name") String name){return name;} 在Postman的Headers中添加请求头参数,不过貌似不能加中文

实现两个列表对应数值相乘、相除、相加等

实现两个列表对应数值相乘、相除、相加等 利用循环实现两个列表相乘使用zip()方法在Python中实现两个列表相乘使用numpy.multiply()方法在Python中实现两个列表相乘使用map()函数在Python中实现两个列表相乘1、利用循环实现两个列表相乘 for循环遍历两个列表元素,…

基于FPGA的PID算法理论详解(1)

基于FPGA的PID算法理论详解(1) 1 概述 比例-积分-微分(PID)控制是业内最常见的控制算法,在工业控制领域有很高的接受度。PID控制器的广泛应用得益于其在多种操作条件下稳定的性能,以及易操作的特性。工程师可以用简单直观的方式实现PID控制。PID控制有三个基本要件:比…

百川智能发布首个530亿参数闭源大模型,今年追上GPT-3.5

4月官宣创业,6月15日发布第一款7B开源模型,7月11日发布第二款13B、130亿参数开源模型。 平均保持2个月一个版本发布速度,8月8日,百川智能发布了创业以来的首个530亿参数闭源大模型——Baichuan-53B(以下简称“53B”&a…

LeetCode 热题 100 JavaScript -- 74. 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非递减顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target ,如果 target 在矩阵中,返回 true ;否则,返回 false 。 …

无涯教程-Perl - glob函数

描述 此函数返回与EXPR匹配的文件的列表,这些文件将由标准Bourne shell进行扩展。如果EXPR未指定路径,请使用当前目录。如果省略EXPR,则使用$_的值。 从Perl 5.6开始,扩展是在内部完成的,而不是使用外部脚本。扩展遵循csh(以及任何派生形式,包括tcsh和bash)的扩展方式,其翻译…

从后往前读取列表的方法

从后往前读取列表的方法 方法1:使用for循环遍历列表时,可以使用reverse()函数将列表反转,然后再遍历。 # 列表 num [0, 1, 2, 3]# 反向遍历 for i in reversed(num):print(i)输出结果: 3 2 1 0方法2:先计算列表长度…

【STM32】小电流FOC驱控一体板(开源)

FOC驱控一体板http://链接: https://pan.baidu.com/s/12HoV9yDlMC5QVGNCJ5tK0w 提取码: 1111 主控芯片stm32f103c8t6 驱动芯片drv8313 三相电流采样 根据B站一个UP主的改的(【【自制】年轻人的第一块FOC驱动器】),大多数元器件是0805&…

(第二篇)ansible-kubeadm在线安装单master集群

ansible可以安装的KS8版本如下: 请按照此博客中的内容操作后,才可以通过下面的命令查询到版本。 [rootk8s-master01 ~]# yum list kubectl --showduplicates | sort -r kubectl.x86_64 1.20.0-0 kubern…

Java SpringBoot 加载 yml 配置文件中字典项

实际项目中,如果将该类信息放配置文件中的话,一般会结合Nocas一起使用 将字典数据,配置在 yml 文件中,通过加载yml将数据加载到 Map中 Spring Boot 中 yml 配置、引用其它 yml 中的配置。# 在配置文件目录(如&#xff…

第一百一十一回 如何实现屏幕适配

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了动画相关的内容,本章回中将介绍 如何适配屏幕.闲话休提,让我们一起Talk Flutter吧。 概念介绍 我们平常使用的手机屏幕大小不同,App运行在这些大小不同的屏幕上时效果却相同&…

ArcGIS Pro实践技术应用——暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用全流程科研能力提升

查看原文>>>ArcGIS Pro实践技术应用——暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合能力 本文将利用ArcGIS Pro 将您的 GIS 工作组织到工程中,您可以使用 ArcGIS Pro 映射 2D 和 3D 数据。借助 ArcGIS Pro&#xff…

阿里云FRP内网穿透挂载多台服务器

1. FRP介绍 FRP (Fast Reverse Proxy) 是比较流行的一款。FRP 是一个免费开源的用于内网穿透的反向代理应用,它支持 TCP、UDP 协议, 也为 http 和 https 协议提供了额外的支持。你可以粗略理解它是一个中转站, 帮你实现 公网 ←→ FRP(服务器…

全国各地区数字经济工具变量-文本词频统计(2002-2023年)

数据简介:本数据使用全国各省工作报告,对其中数字经济相关的词汇进行词频统计,从而构建数字经济相关的工具变量。凭借数字经济政策供给与数字经济发展水平的相关系数的显著性作为二者匹配程度的划分依据,一定程度上规避了数字经济…

leetcode做题笔记74搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非递减顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target ,如果 target 在矩阵中,返回 true ;否则,返回 false 。 思…

【创建型设计模式】C#设计模式之建造者模式

题目要求: 假设你正在开发一个游戏角色创建器,需要使用建造者模式来构建角色。角色具有属性:姓名、性别、职业、等级。请根据给定的要求和类结构,完成建造者模式的实现。要求:创建一个 Character 类,包含姓…

构建之法 - 软件工程实践教学:每天都向前推进一点点

作者:福州⼤学 汪璟玢⽼师 汪老师:每次都向前推进一点点,哪怕只有一点点,也好过什么都不做。 ​邹老师:对,几个学期下来,就已经超过那些“空想”的团队很远了。坚持下去! 汪老师&…

【变形金刚02】注意机制以及BERT 和 GPT

一、说明 我已经解释了什么是注意力机制,以及与转换器相关的一些重要关键字和块,例如自我注意、查询、键和值以及多头注意力。在这一部分中,我将解释这些注意力块如何帮助创建转换器网络,注意、自我注意、多头注意、蒙面多头注意力…

ceph相关概念和部署

Ceph 可用于向云提供 Ceph 对象存储 平台和 Ceph 可用于提供 Ceph 块设备服务 到云平台。Ceph 可用于部署 Ceph 文件 系统。所有 Ceph 存储集群部署都从设置 每个 Ceph 节点,然后设置网络。 Ceph 存储集群需要满足以下条件:至少一个 Ceph 监控器&#x…

Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格

相关API的使用: 1 traverse (模型循环遍历方法) 2. THREE.TextureLoader(用于加载和处理图片纹理) 3. THREE.MeshLambertMaterial(用于创建材质) 4. getObjectByProperty(通过材…