当前位置: 首页 > news >正文

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,暂时就介绍这么多!

相关文章:

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.l…...

Flink的简要概述

以下是Flink的各种架构的简要概述: 1. Flink概述:Apache Flink是一个开源的流处理和批处理框架,具有高性能、容错性和数据一致性保证。它支持事件驱动的流处理和批量处理,并提供了丰富的API和工具来处理实时数据流和大规模数据集…...

多线程下的signal信号处理

多线程中,信号在哪个线程中处理是不确定的,可能被任意一个线程处理 下边的代码可以验证该结论,多次Ctrlc,会被不同的线程捕获此信号,并处理,最终每个线程死锁,阻塞在等待锁的状态 #include &l…...

〖Python网络爬虫实战㉞〗- 图形验证码OCR识别

订阅:新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列(零基础小白搬砖逆袭) 说明:本专栏持续更新中,订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…...

Python Scrapy网络爬虫框架从入门到实战

Python Scrapy是一个强大的网络爬虫框架,它提供了丰富的功能和灵活的扩展性,使得爬取网页数据变得简单高效。本文将介绍Scrapy框架的基本概念、用法和实际案例,帮助你快速上手和应用Scrapy进行数据抓取。 Scrapy是一个基于Python的开源网络爬…...

后端面试话术集锦第四篇:ElasticSearch面试话术

🚗后端面试集锦目录 💖后端面试话术集锦第 1 篇:spring面试话术💖 💖后端面试话术集锦第 2 篇:spring boot面试话术💖 💖后端面试话术集锦第 3 篇:spring cloud面试话术💖 💖后端面试话术集锦第 4 篇:ElasticSearch面试话术💖 💖后端面试话术集锦第 5 …...

C++之ifstream成员函数get、tellg、eof实例(一百八十五)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…...

安卓webview,网页端生成安卓项目(极速生成)教程

安卓webview,网页端生成安卓项目(极速生成)教程 一,前言 当自己做了一个PC端的页面,也就是前端的页面,或者已经上服的页面,但也想生成一个安卓端供用户使用,本教程详细讲解如何把前…...

如何在vscode导入下载的插件安装包

点击vscode插件 --> 点击3个点 --> 选择从VSIX安装 点击更新报 Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application and try again. If you’re on macOS Sierra or later, you’ll need to m…...

springboot 多线程实战

先说下业务场景,业务1:基于实时轨迹数据打卡,业务2:基于非实时轨迹的时间差,计算累计时长。 简单点说就是从websocket获取到的实时数据,既要兼容不耗时操作,又要兼容耗时操作。 单线程做的话&a…...

求生之路2社区服务器sourcemod安装配置搭建教程centos

求生之路2社区服务器sourcemod安装配置搭建教程centos 大家好我是艾西,通过上文我们已经成功搭建了求生之路2的服务端。但是这个服务端是纯净的服务端,就是那种最纯粹的原版。如果想要实现插件、sm开头的命令等功能,需要安装这个sourcemod。…...

通达OAV12版本,表单及流程,定制开发总结

通达OA-V12版本,表单及流程,定制开发总结 触发器金蝶系统对接 日期:2023年8月29日 触发器 一键转交操作,不会调用触发器。 解决办法:可以按需要按步骤,关闭一键转交按钮。这里会隐藏一键转交、一键结束按钮…...

浅析Linux 物理内存外碎片化

本文出现的内核代码来自Linux4.19,如果有兴趣,读者可以配合代码阅读本文。 一、Linux物理内存外碎片化概述 什么是Linux物理内存碎片化?Linux物理内存碎片化包括两种: 1.物理内存内碎片:指分配给用户的内存空间中未…...

C#中的get和set

当我们定义属性的 get 访问器和 set 访问器时,其中的 return 和 value 分别代表以下含义: return:在 get 访问器中使用,表示返回属性的值给调用方。它用于将属性关联的字段的值返回给外部代码。value:在 set 访问器中…...

mysql8.0以上忘记密码的重置方法 - window系统

1、关闭 mysql 服务,以 管理员身份 运行命令提示符工具,执行下面的命令 net stop mysql可以在任务管理器的服务中查看状态 2、跳过 mysql 权限验证,以管理员身份运行 cmd,进入 mysql 的安装 bin 目录,执行如下指令 m…...

手写Vue3响应式数据原理

Vue3响应式数据 前言一、proxy是什么?1.1 proxy基本使用 二、实现最基本的reactive函数三、实现基本响应式系统四、完善基本响应式系统4.1 执行每一个副作用函数4.2 实现依赖收集4.2.1 基本实现 4.3 改进桶结构 五、相关面试题1.Object.defineProperty 和 Proxy 的区…...

基于PIC单片机篮球计分计时器

一、系统方案 本设计采用PIC单片机作为主控制器,矩阵键盘控制,比分,计时控制,24秒,液晶12864显示。 二、硬件设计 原理图如下: 三、单片机软件设计 1、首先是系统初始化 2、液晶显示程序 /*************…...

关于Maxwell与Kafka和数据库的监控

1.Maxwell的配置 其实就是配置两端的配置信息,都要能连接上,然后才能去传输数据 config.properties #Maxwell数据发送目的地,可选配置有stdout|file|kafka|kinesis|pubsub|sqs|rabbitmq|redis producerkafka # 目标Kafka集群地址 kafka.bootstrap.servershadoop102…...

【设计模式】Java设计模式详细讲解

一、概述 Java设计模式是Java程序设计中一种重要的最佳实践,它提供了一种框架和结构,可以帮助开发者更好地理解和设计复杂的系统。设计模式不仅仅是一种语法规则,更是一种思想和方法论,它能够帮助开发者更好地分析、设计和实现软…...

【MySQL】表的增删查改(进阶)

目录 1.数据库约束 1.1NOT NULL:非空约束 1.2UNIQUE:唯一值约束 1.3DEFAULT:默认值约束 1.4PRIMARY KEY:主键约束 1.5FOREIGN KEY:外键约束 1.6CHECK约束 2.表的设计 2.1一对一 2.2一对多 2.3多对多 3.新增…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...