vue中bus的使用和涉及到的问题

创建一个js文件

import Vue from "Vue"
export default new Vue

我们可以直接在要使用的页面中引用使用

import bus from '@/assets/js/eventBus.js';bus.$emit("info", "123") // 使用bus.$on("info", (val) => { // 接收console.log("info val", val);
})

也可以     main.js中引用定义:

import Bus from '@/assets/js/eventBus.js';  
Vue.prototype.$bus = Bus;  //注意这里的Vue是我上面引入的vue   import Vue from 'vue'this.$bus.$emit("vaPage",value); //很像父子之间传值的方法this.$bus.$on("vaPage", v =>{   //vaPage传的时候的key是什么接收就必须是什么console.log(v);   //v是传来的值,可以接收多个参数
})

正常的通讯上面就已经完成了,但是还有一个问题那就是如果接受的页面不存在了,还是会继续执行bus.$on,所以我们需要再不需要的时候或者页面销毁时将bus销毁

  beforDestroy(){this.$bus.$off("vaPage");  //当这个组件销毁的时候bus也跟着一起销毁bus.$off("info") // 或者}

但是如果是有个页面通讯多个页面通用一个方法我们又该怎么办呢?比如一个tab切换,里面分别是不同的内容,但是点击了之后有一个详情需要联动,如下图:

不可能点击一个定义一个方法,详情接受所有方法, 只能是都是用一个方法然后通过传递特定的标识来进行处理!

那么当有显示隐藏功能时就会发现,页面没有了正常来说不应该再走该页面接收的方法了,但是现实情况是一直在调用,所以使用bus.$off("info")销毁方法是不对的,bus是一个全局的,如果销毁了会导致页面的其他功能不可用。所以想了一个折中的方法暂时解决该问题

  data() {return {lovk: true, // 定义一个变量}},// 在销毁前解绑busbeforeDestroy() {this.lovk = falseconsole.log("beforeDestroy", this.lovk)},mounted() { bus.$on("info", (val) => {if (this.lovk) { // 如果this.lovk为true,说明该页面存在需要执行里面的方法,否则就不执行console.log("info val", val);}})  },
// 那么有人会说为什么不直接将整个bus.$on()包裹进去呢?如下列:mounted() { if (this.lovk) { // 这样写都不会触发了不是更好吗?bus.$on("info", (val) => { console.log("info val", val);})  }},
// 其实是不可行的,实验一下你会发现,当你页面消失在显示后bus.$on()方法不执行了

bus还有很多很多坑需要我们去注意,所以谨慎使用bus,暂时就介绍这么多!

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

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

相关文章

缺陷或负样本难以收集怎么办?使用生成式模型自动生成训练样本,image-to-image Stable diffusion

文章大纲 样本稀疏与对应的解决方案如何解决工业缺陷检测小样本问题参考1:AIDG(Artificial Intelligent Defect Generator)参考2:灵感来源 : Image-to-Image Diffusion Models参考文献与学习路径参考博文数据集算法缺陷检测库hugging face样本稀疏与对应的解决方案 1.数据层面…

【点云分割】points3d框架学习01 —— 安装和配置

安装 $ pip install torch1.12.1cu113 torchvision0.13.1cu113 torchaudio0.12.1 --extra-index-url https://download.pytorch.org/whl/cu113 $ pip install torch-points3d $ pip install ipython $ pip install trame $ pip install h5py $ pip install gdown案例 from to…

Windows服务器使用Mysqldump备份MySQL数据库方法

Windows服务器使用Mysqldump备份MySQL数据库方法 1.进入到MySQL安装目录的bin目录下,进入cmd F:\20220601\dev_software\mysql-8.0.11-winx64 2.执行备份命令: mysqldump -u root -p zj_bak test_bak -r D:\backup.sql3.导入备份 数据: m…

【MySQL】组合查询

目录 一、组合查询 1.创建组合查询 2.union规则 3.包含或取消重复的行 4.对组合查询结果排序 一、组合查询 多数SQL查询都只包含从一个或多个表中返回数据的单条SELECT语句。MySQL也允许执行多个查询(多条SELECT语句),并将结果作为单个查…

C++ ASIO 实现异步套接字管理

Boost ASIO(Asynchronous I/O)是一个用于异步I/O操作的C库,该框架提供了一种方便的方式来处理网络通信、多线程编程和异步操作。特别适用于网络应用程序的开发,从基本的网络通信到复杂的异步操作,如远程控制程序、高并…

【LeetCode-中等题】240. 搜索二维矩阵 II

文章目录 题目方法一:暴力双for查找方法二:二分查找,对每二维数组进行拆分,一行一行的进行二分查找方法三:列倒序Z字形查找 题目 方法一:暴力双for查找 public boolean searchMatrix(int[][] matrix, int …

【C++】UDP通信,实现文件的传输

目录 1 TCP与UDP比较 2 UDP 3 通信流程 4 实践 5 运行结果 1 TCP与UDP比较 2 UDP简介 UDP通信是无连接的,因此不需要

JAVA-编程基础-10-集合

Lison <dreamlison163.com>, v1.0.0, 2023.04.23 JAVA-编程基础-10-集合 文章目录 JAVA-编程基础-10-集合List、Set、Map、队列全面解析ListArrayList创建ArrayList 向ArrayList中添加元素 List、Set、Map、队列全面解析 Java 集合框架可以分为两条大的支线&#xff1a;…

Java中word转Pdf工具类

背景&#xff1a; 最近做的一个项目中&#xff0c;对于word转Pdf用的地方很多&#xff0c;特此记录 搭建总图&#xff1a; 代码部分&#xff1a; 1.需要的jar包&#xff1a; aspose-words-15.8.0-jdk16.jar 注&#xff1a;下载好这个jar包后&#xff0c;在项目的根目录新建一…

基于微服务、Java、Springcloud、Vue、MySQL开发的智慧工地管理系统源码

智慧工地聚焦施工现场岗位一线&#xff0c;围绕“人、机、料、法、环”五大要素&#xff0c;数字化工地平台与现场多个子系统的互联实现了工地业务间的互联互通和协同共享。数字化工地管理平台能够盘活工地各大项目之间孤立的信息系统&#xff0c;实现数据的统一接入、处理与维…

CSS实现白天/夜晚模式切换

目录 功能介绍 示例 原理 代码 优化 总结 功能介绍 在网页设计和用户体验中&#xff0c;模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案&#xff0c;以适应其个人偏好或特定环境。在这篇博客中&#xff0c;我们将探索如何使用纯CSS实现一…

用变压器实现德-英语言翻译【01/8】:嵌入层

一、说明 本文是“用变压器实现德-英语言翻译”系列的第一篇文章。它引入了小规模的嵌入来建立感知系统。接下来是嵌入层的变压器使用。下面简要概述了每种方法&#xff0c;然后是德语到英语的翻译。 二、技术背景 嵌入层的目标是使模型能够详细了解单词、标记或其他输入之间的…

微商城分销系统免费源码_微商城分销系统设计功能开发_OctShop

要使用微商城分销系统源码来搭建或制作自己的微商城分销系统平台&#xff0c;那么&#xff0c;首先你需要知道什么是分销&#xff1f;通俗点讲就是买家或消费者成为商家或平台的分销商&#xff0c;通过推荐给分享好友&#xff0c;或其他的各种推广方式&#xff0c;如二维码&…

生产环境部署与协同开发 Git

目录 一、前言——Git概述 1.1 Git是什么 1.2 为什么要使用Git 什么是版本控制系统 1.3 Git和SVN对比 SVN集中式 Git分布式 1.4 Git工作流程 四个工作区域 工作流程 1.5 Git下载安装 1.6 环境配置 设置用户信息 查看配置信息 二、git基础 2.1 本地初始化仓库 ​编辑…

分段三次hermit插值

保形三次hermit插值 一、算法实现 一、插值函数建立 设函数 y F ( x ) yF(x) yF(x)在区间 [ a , b ] [a,b] [a,b]上有定义&#xff0c;且已知在离散点 a x 0 < x 1 < . . . < x n b ax_0<x_1<...<x_n b ax0​<x1​<...<xn​b上的值 y 0 , y…

Linux 查看当前文件夹下的文件大小

1.直接查看: ll 或者 ls -la #查看文件大小&#xff0c;以kb为单位 ll#查看文件大小&#xff0c;包含隐藏的文件&#xff0c;以kb为单位 ls -la2.以 M 或者 G 为单位查看&#xff0c;根据文件实际大小进行合适的单位展示 du -sh *

k8s集群搭建

文章目录 前言一、前置准备1.1 虚拟机准备1.2 关闭swap分区1.3 将桥接的IPv4流量传递到iptables链1.4 开启ipvs 二、容器化环境和组件安装2.1 docker安装2.2 设置docker加速镜像器2.4 设置yum镜像源2.5 安装kubeadm、kubelet和kubectl 三、集群搭建3.1 安装k8s所需镜像3.2 在ha…

LAMP 配置与应用

LAMP 架构的组成 LAM(M)P&#xff1a; L&#xff1a;linux A&#xff1a;apache (httpd) M&#xff1a;mysql, mariadb P&#xff1a;php, perl, python apache的功能&#xff1a; 第一&#xff1a;处理http的请求、构建响应报文等自身服务&#xff1b; 第二&#xff1a…

【C#学习笔记】数据类中常用委托及接口——以List<T>为例

文章目录 List\<T\>/LinkedList \<T\>为什么是神&#xff1f;&#xff08;泛型为什么是神&#xff09;一些常见&#xff0c;通用的委托和接口ComparisonEnumerator List<T>/LinkedList <T>为什么是神&#xff1f;&#xff08;泛型为什么是神&#xff0…

数据结构(Java实现)-栈和队列

栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 先进后出 栈的使用 栈的模拟实现 上述的主要代码 public class MyStack {private int[] elem;private int usedSize;public MyStack() {this.elem new int[5];}Overridepublic …