Vue 3 中实现页面特定功能控制
在开发 Vue 应用时，我们经常会遇到需要在特定页面启用或禁用某些功能的情况。本文将以 A父.vue 页面为例，探讨如何在点击汇总菜单时仅在该页面生效，而在其他页面不生效的问题。
1. 利用 Vue 3 的 provide 和 inject 实现状态传递
Vue 3 提供了 provide 和 inject 两个函数，允许我们在父组件和子组件之间传递状态，而不需要通过 props 逐级传递。
步骤一：在父组件中提供状态
首先，在 A父.vue 父组件中，我们定义一个状态 isComponentPage 来标识当前是否为组件页面，并使用 provide 函数将其提供给子组件。
<!-- A父.vue -->
<script setup>
import { provide, ref } from 'vue';
import son from '@/components/son.vue';const isComponentPage = ref(true); // 标识是否为组件页面
provide('isComponentPage', isComponentPage);
</script>
步骤二：在子组件中注入状态
接着，在 son.vue 子组件中，我们使用 inject 函数来获取父组件提供的状态，并根据该状态控制 showSummaryRow 的值。
<!-- son.vue -->
<script setup>
import { inject, computed } from 'vue';const isComponentPage = inject('isComponentPage'); // 从父组件获取状态
const showSummaryRow = computed(() => {return isComponentPage.value; // 仅在组件页面时显示汇总行
});
</script>
2. 根据状态控制汇总按钮的显示
在 son.vue 中，我们需要确保汇总按钮的显示逻辑依赖于 showSummaryRow 的值。这样，只有在 isComponentPage 为 true 时，汇总按钮才会显示。
<template><ul class="server-list"><li v-if="showSummaryRow" class="server-item" @click="handleSummaryClick"><el-icon color="#0256FF"><Monitor /></el-icon><span class="server-text">汇总：共 {{ totalServerCount }} 个服务器</span></li></ul>
</template>
3. 其他页面无需额外操作
在其他页面中，由于没有提供 isComponentPage 或其值为 false，汇总按钮将不会显示。这样，我们就实现了仅在 A父.vue 页面中显示汇总按钮的功能。
总结
通过使用 Vue 3 的 provide 和 inject，我们可以轻松地在特定页面控制功能的显示与隐藏，而无需依赖于路由判断。这种方法使得状态管理更加灵活，同时也保持了组件的独立性和可重用性。希望这篇文章能帮助你在 Vue 3 项目中实现类似的功能控制。
相关文章：
Vue 3 中实现页面特定功能控制
在开发 Vue 应用时，我们经常会遇到需要在特定页面启用或禁用某些功能的情况。本文将以 A父.vue 页面为例，探讨如何在点击汇总菜单时仅在该页面生效，而在其他页面不生效的问题。 1. 利用 Vue 3 的 provide 和 inject 实现状态传递 Vue 3 提供…...
JavaScript原生深拷贝方法 structuredClone使用
structuredClone 简介 structuredClone 是现代浏览器提供的原生 JavaScript 方法，用于深拷贝对象。它可以处理各种复杂数据结构，包括嵌套对象、数组、Date、Map、Set 等，且支持循环引用。 语法 const clone structuredClone(value);value:…...
Wireshark常用功能使用说明
此处用于记录下本人所使用 wireshark 所可能用到的小技巧。Wireshark是一款强大的数据包分析工具，此处仅介绍常用功能。 Wireshark常用功能使用说明 1.相关介绍1.1.工具栏功能介绍1.1.1.时间戳/分组列表概况等设置 1.2.Windows抓包 2.wireshark过滤器规则2.1.wiresh…...
深度学习：自然语言处理
一、引言 自然语言处理作为人工智能领域的关键分支，致力于使计算机能够理解、分析和生成人类语言。近年来，随着深度学习技术的迅猛发展，自然语言处理取得了前所未有的突破，一系列创新技术和应用不断涌现，极大地推动了…...
C底层 函数栈帧
文章目录 一，什么是寄存器 二，栈和帧 前言 我们在学习c语言程序的时候，是不是有很多的疑问，如 1，为什么形参不可以改变实参 2，为什么我们编写程序的时候会出现烫烫烫......这个乱码 3，那些局…...
Linux系统编程——进程替换
目录 前言 二、进程程序替换的概念 三、进程程序替换的原理 编辑 四、为什么需要进行进程程序替换 五、如何进行进程程序替换 1、进程替换函数： 1)execl()函数 2)execv()函数 3) execlp()函数 4) execvp()函数 5）execle函数 6）ex…...
PVE中VLAN的设置要点
使用这个拓扑进行连接无法直接访问PVE PVE 设置如下： 核心重点：PVE 的 vmbr0 接口直接绑定了 enp2s0，这会导致 VLAN 流量无法正确处理，因为 PVE 没有专门为 VLAN 3 配置接口。 1.vmbr0 和 vmbr0.3 都是绑定在物理接口 enp2s0 上&…...
零基础Python学习
1.环境搭建 1.1 安装运行环境python3.13 Welcome to Python.org 1.2 安装集成开发环境PyCharm PyCharm: the Python IDE for data science and web development 1.3 创建项目 && 设置字体 2.基础语法 2.1 常量与表达式 在python中整数除整数不会优化，所…...
命令提示符窗口（CMD）控制windows操作系统
一、关于进程 1. 通过进程ID结束进程： taskkill /PID 进程ID 2. 通过进程名称结束进程 taskkill /IM 进程名称.exe 3. 强制结束进程 taskkill /F /IM 进程名称.exe 4. 结束包含特定字符串的全部进程 taskkill /IM 包含字符串* /T 5. 启动一个新的命令行窗口来运行指…...
虚幻引擎5（Unreal Engine 5）高级教程
虚幻引擎5（Unreal Engine 5）高级教程 引言 虚幻引擎5（Unreal Engine 5，简称UE5）是Epic Games推出的一款功能强大的游戏引擎，广泛应用于游戏开发、影视制作和虚拟现实等领域。UE5以其先进的图形渲染技术、…...
3DMAX星空图像生成器插件使用方法详解
3DMAX星空图像生成器插件，一键生成星空或夜空的二维图像。它可用于创建天空盒子或空间场景，或作为2D艺术的天空背景。 【主要特点】 -单击即可创建星空图像或夜空。 -星数、亮度、大小、形状等参数。 -支持任何图像大小（方形）。…...
【QNX+Android虚拟化方案】129 - USB眼图参数配置
【QNX+Android虚拟化方案】129 - USB眼图参数配置 1. 软件侧dts如何配置眼图参数 及 其对应关系2. 硬件 QNX 侧调试眼图命令2.1 High Speed USB2.0 Host2.2 Super Speed USB3.0 Host3. 硬件 Android 侧调试眼图命令基于原生纯净代码，自学总结 纯技术分享，不会也不敢涉项目、不…...
Linux内核4.14版本——ccf时钟子系统（3）——ccf一些核心结构体
目录 1. struct clk_hw 2. struct clk_ops 3. struct clk_core 4. struct clk_notifier 5. struct clk 6. struct clk_gate 7. struct clk_divider 8. struct clk_mux 9. struct clk_fixed_factor 10. struct clk_fractional_divider 11. struct clk_multiplier 12…...
服务器遭受DDoS攻击后如何恢复运行？
当服务器遭受 DDoS（分布式拒绝服务）攻击 后，恢复运行需要快速采取应急措施来缓解攻击影响，并在恢复后加强防护以减少未来攻击的风险。以下是详细的分步指南： 一、应急处理步骤 1. 确认服务器是否正在遭受 DDoS 攻击 …...
js原型、原型链和继承
文章目录 一、原型1、prototype2、constructor 二、原型链1、字面量原型链2、字面量继承3、构造函数的原型链4、Object.create5、Object.setPrototypeOf 三、继承1、构造函数继承2、原型链继承3、组合继承 四、常见链条1、Function2、Object.prototype 继承是指将特性从父代传递…...
看不见的彼方：交换空间——小菜一碟
有个蓝色的链接，先去看看两年前的题目的write up （https://github.com/USTC-Hackergame/hackergame2022-writeups/blob/master/official/%E7%9C%8B%E4%B8%8D%E8%A7%81%E7%9A%84%E5%BD%BC%E6%96%B9/README.md） 从别人的write up中了解到&…...
传奇996_38——称号系统
记住： 称号是装备，加属性的 特效是顶戴，加特效的 需要两个命令分开设置，称号和特效不关联 角色-称号栏显示的图标：由装备表字段，背包显示Looks控制，图片位置在：stab\res\private\t…...
C++：异常
---什么是异常？ 异常是面向对象语法处理错误的一种方式。 ---C语言传统的处理错误的方式有哪些呢？ 1.返回错误码，有些API接口都是把错误码放到errno中。 2.终止程序，比如发生越界等严重问题时，我们也可以主动调用exit…...
winScp连接Ubantu系统,访问拒绝的解决方式
一、原理分析 win10系统能够通过WinScp连接到Ubantu系统的前提是Ubantu系统开启ssh服务 二、解决步骤 1、Ubantu系统开启ssh服务 更新软件列表 sudo apt update安装OpenSSH服务器 sudo apt install openssh-server开启SSH服务 service sshd start到此，winScp…...
Oracle 建表的存储过程
建表的存储过程 下面是建表的存储过程，用途：通过不同的表，根据不同过滤条件，得到某个字段，例如neid，然后创建一个新表T，表T的表名为拼接XXXX_XXX_neid，表T的字段自行添加 xxx&…...
芯科科技率先支持Matter 1.4，推动智能家居迈向新高度
Matter 1.4引入核心增强功能、支持新设备类型，持续推进智能家居互联互通 近日，连接标准联盟（Connectivity Standard Alliance，CSA）发布了Matter 1.4标准版本。作为连接标准联盟的重要成员之一，以及Matter标…...
pandas快速解决空列表问题
在使用 Pandas 处理数据时，我们经常会遇到包含空列表（即空值或缺失值）的问题。Pandas 提供了一些非常有效的方法来处理这些空列表，使得数据清理和预处理变得更加简单和高效。 以下是一个示例，展示如何使用 Pandas 快速…...
sentinel使用手册
1.引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId></dependency>2.yaml spring:cloud:sentinel:transport:dashboard: localhost:8090 #sentinel控制台地址…...
【继承】—— 我与C++的不解之缘（十九）
前言： 面向对象编程语言的三大特性：封装、继承和多态 本篇博客来学习C中的继承，加油！ 一、什么是继承？ 继承(inheritance)机制是⾯向对象程序设计使代码可以复⽤的最重要的⼿段，它允许我们在保持原有类…...
腾讯微众银行大数据面试题（包含数据分析/挖掘方向）面试题及参考答案
为什么喜欢使用 XGBoost，XGBoost 的主要优势有哪些？ XGBoost 是一个优化的分布式梯度增强库，在数据科学和机器学习领域应用广泛，深受喜爱，原因主要在于其众多突出优势。 首先，它的精度高，在许多机器学习竞赛和实际应用中，XGBoost 都展现出卓越的预测准确性。其基于决策…...
组合数练习题——c++
题目设置： 现在有x个相同的小球，分给y个人，每个人至少分k个，请问有多少种可能的分发方法，由于结果可能较大，答案对10^97取模。 输入格式： 一行3个整数：x，y, k…...
Java：JPMS模块化开发
JPMS（Java Platform Module System）简介 为什么用JPMS？ JPMS（Java 平台模块系统）是 Java 9 引入的模块化系统，也称为 Jigsaw 项目。它为 Java 提供了更精细的模块化机制，用于组织和管理代码&a…...
Spring Boot中配置Flink的资源管理
在 Spring Boot 中配置 Flink 的资源管理，需要遵循以下步骤： 添加 Flink 依赖项 在你的 pom.xml 文件中，添加 Flink 和 Flink-connector-kafka 的依赖项。这里以 Flink 1.14 版本为例： <!-- Flink dependencies --><de…...
【ruby on rails】dup、deep_dup、clone的区别
一、区别 dup 浅复制：dup 方法创建对象的浅复制。 不复制冻结状态：dup 不会复制对象的冻结状态。 不复制单例方法：dup 不会复制对象的单例方法。 deep_dup 深复制：deep_dup 方法创建对象的深复制，递归复制嵌套的对象。…...
)
鸿蒙开发-HMS Kit能力集(应用内支付、推送服务)
1 应用内支付 开发步骤 步骤一：判断当前登录的华为账号所在服务地是否支持应用内支付 在使用应用内支付之前，您的应用需要向IAP Kit发送queryEnvironmentStatus请求，以此判断用户当前登录的华为帐号所在的服务地是否在IAP Kit支持结算的国…...
springboot中使用mongodb完成评论功能
pom文件中引入 <!-- mongodb --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> yml中配置连接 data:mongodb:uri: mongodb://admin:1234561…...
南京仁品耳鼻喉专科医院：12月启动公益义诊月
专业医疗资源送至“家门口”！南京仁品耳鼻喉专科医院启动公益义诊月 随着2024年即将步入尾声，南京仁品耳鼻喉医院为回馈社会，提升公众健康福祉，将于12月隆重推出“三甲专家公益义诊月”活动。此次活动旨在通过汇聚众多耳鼻喉领域…...
微信小程序首页搜索框的实现教程
微信小程序首页搜索框的实现教程 前言 在现代移动应用中，搜索功能是用户获取信息的主要方式之一。对于购物小程序而言，提供一个美观且高效的搜索框，可以显著提升用户体验，帮助用户快速找到他们想要的商品。本文将详细介绍如何在微信小程序中实现一个样式优美的搜索框，包…...
)
Educational Codeforces Round 151 (Rated for Div. 2)
题目链接 B. Come Together 题意 输入 输出 思路 可以将B、C坐标作A的变换，将A平移至原点，然后分情况讨论: B、C两点都在轴上，具体分为同向轴和其他情况B、C两点都在象限中，具体分为相同象限、对角象限和相邻象限分别位于象限…...
第二十一天 深度学习简介
深度学习（Deep Learning，简称DL）是机器学习的一个分支，它通过构建和训练深层神经网络模型，从数据中学习和提取特征，以实现复杂任务的自动化处理和决策。以下是对深度学习的详细介绍： 一、起源与…...
mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端？
随笔 从千万粉丝“何同学”抄袭开源项目说起，为何纯技术死路一条？ 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 我们的系统应该配置哪些监控报警项？ 监控报警系统如何实现自监控? java 老矣，尚能饭否ÿ…...
elementUI如何dialog对话框 不设置 点击遮罩层 自动关闭的功能
背景 用户在填写dialog对话框的时候，有时候误触 遮罩层，导致form表单直接关闭，用户的信息丢失 代码 要使对话框在点击遮罩层时关闭，您需要在 el-dialog 组件上将 close-on-click-modal 属性设置为 false。以下是更新后的代码&…...
循环神经网络：从基础到应用的深度解析
🍛循环神经网络（RNN）概述 循环神经网络（Recurrent Neural Network, RNN）是一种能够处理时序数据或序列数据的深度学习模型。不同于传统的前馈神经网络，RNN具有内存单元，能够捕捉序列中前后信息…...
LeetCode 100.相同的树
题目： 给你两棵二叉树的根节点 p 和 q ，编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同，并且节点具有相同的值，则认为它们是相同的。 思路：灵神 代码： class Solution {public boolean…...
序列化与反序列化
序列化是将对象转换为可被存储或传输的格式，例如将对象转换为字节流或字符串。序列化的过程可以将对象的状态保存下来，以便在需要时可以重新创建对象。 反序列化则是将序列化的对象转换回原始的对象形式，以便可以使用和操作这些对象。 序列…...
spring boot打包fat jar
所谓fat jar就是包含所有依赖的jar以及其他开发的代码的jar包。可以通过java -jar xxx.jar直接启动运行，不需要部署到tomcat中间件就能运行。 接下来我们使用maven进行打包： （1）在需要带包的主模块的pom中添加build依赖…...
2021年美亚杯电子数据取证大赛-个人赛
资格赛-案件背景 2021年10月某日早上，本市一个名为"大路建设"的高速公路工地主管发现办公室的计算机被加密并无法开启，其后收到了勒索通知。考虑到高速公路的基建安全，主管决定报警。警方调查人员到达现场取证，发现办公…...
用 React 编写一个笔记应用程序
这篇文章会教大家用 React 编写一个笔记应用程序。用户可以创建、编辑、和切换 Markdown 笔记。 1. nanoid nanoid 是一个轻量级和安全的唯一字符串ID生成器，常用于JavaScript环境中生成随机、唯一的字符串ID，如数据库主键、会话ID、文件名等场景。 …...
泛型擦除是什么？
泛型擦除(Type Erasure)是Java编译器在编译泛型代码时的一种机制，它的目的是确保泛型能够与JAVA的旧版本(即不支持泛型的版本)兼容。泛型擦除会在编译时移除泛型类型信息，并将泛型类型替换为其非泛型的上限类型(通常是Object) 详细解释 在Java中&#…...
鸿蒙Next星河版基础代码
目录： 1、鸿蒙箭头函数的写法2、鸿蒙数据类型的定义3、枚举的定义以及使用4、position绝对定位及层级zIndex5、字符串的拼接转换以及数据的处理(1)字符串转数字(2)数字转字符串(3)布尔值转换情况(4)数组的增删改查 6、三元表达式7、鸿蒙for循环的几种写法7.1、基本用…...
物联网智能项目：智能家居系统的设计与实现
物联网（Internet of Things，IoT）技术正在迅速改变我们的生活方式，特别是在智能家居、工业自动化、环境监控等领域。物联网智能项目通过将设备、传感器、控制器等通过互联网连接，实现设备间的智能交互，带来高效、便捷和智能的体验。本文将介绍一个典型的物联网智能家居项目…...
STL算法之set相关算法
STL一共提供了四种与set(集合)相关的算法，分别是并集(union)、交集(intersection)、差集(difference)、对称差集(symmetric difference)。 目录 set_union set_itersection set_difference set_symmetric_difference 所谓set，可细分为数学上定义的和…...
STM32主要功能
STM32 是由意法半导体（STMicroelectronics）推出的一系列基于 ARM Cortex-M 内核的微控制器（MCU）。STM32 微控制器广泛应用于嵌入式系统中，因其高性能、低功耗、丰富的外设接口和多种封装形式而被广泛采用。其主要功能和…...
【数据结构】--ArrayList与顺序表
文章目录 1. 线性表2. 顺序表3. ArrayList简介4. MyArrayList的实现5. ArrayList使用5.1 ArrayList的构造5.2 ArrayList常见操作5.3 ArrayList的遍历5.4 ArrayList的扩容机制 6. ArrayList的具体使用6.1 简单的洗牌算法6.2 杨辉三角 1. 线性表 线性表（linear list&…...
多线程篇-3--java内存模型（主内存，共享内存，三大特性，指定重排）
Java内存模型 Java Memory Model，简称JMM，本身是一种抽象的概念，实际上并不存在，它描述的是一组规范，通过这组规范定义了程序中各个变量（包括实例字段，静态字段和构成数组对象的元素࿰…...