Vue 3 中实现页面特定功能控制

在开发 Vue 应用时,我们经常会遇到需要在特定页面启用或禁用某些功能的情况。本文将以 A父.vue 页面为例,探讨如何在点击汇总菜单时仅在该页面生效,而在其他页面不生效的问题。

1. 利用 Vue 3 的 provideinject 实现状态传递

Vue 3 提供了 provideinject 两个函数,允许我们在父组件和子组件之间传递状态,而不需要通过 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 的值。这样,只有在 isComponentPagetrue 时,汇总按钮才会显示。

<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 的 provideinject,我们可以轻松地在特定页面控制功能的显示与隐藏,而无需依赖于路由判断。这种方法使得状态管理更加灵活,同时也保持了组件的独立性和可重用性。希望这篇文章能帮助你在 Vue 3 项目中实现类似的功能控制。

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

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

相关文章

Spring Boot自定义启动banner

在启动 Springboot 应用时&#xff0c;默认情况下会在控制台打印出 Springboot 相关的banner信息。 自定义banner 如果你想自定义一个独特的启动banner&#xff0c;该怎么做呢&#xff1f;Springboot 允许我们通过自定义启动banner来替换默认的banner。只需要在 resources 目…

leaflet 的基础使用

目录 一、创建dom节点 二、创建地图 三、添加底图&#xff08;天地图&#xff09;&#xff0c;在地图创建完成后添加底图 本章主要讲述leaflet在vue中的使用&#xff1a; leaflet 详情总目录&#xff1a;传送 一、创建dom节点 <div class"map" id"map_…

C++分治思想

分治思想的定义 分治思想是C中很重要的一个思想&#xff0c;它的主旨是“将大的问题化作小的问题&#xff0c;将小问题在化作更小的问题”。就是这样一个看起来十分简单的思想&#xff0c;却涵盖了许许多多的算法&#xff0c;如递归&#xff0c;递推&#xff0c;贪心等。 分治…

ubuntu的用户使用

ubuntu系统中的常规用户登录方式 在系统root用户是无法直接登录的,因为root用户的权限过大所以其安全性比较差 在登录系统时一般使用在安装系统时建立的普通用户登录 如果需要超级用户权限: Ubuntu用户密码破解 在系统安装完成后默认grub启动等待时间为0&#xff0c;建议改…

浏览器拨测:将网站护航的阵地再前推一米

作者&#xff1a;泉思 “从你在地址栏里敲下回车开始到你在网页上看到内容中间经过了哪些步骤”&#xff0c; 这是一个非常常见的互联网公司的面试题。想必很多开发者对于这个问题可以给出一个非常完整的回答&#xff0c;但是对于用户来说&#xff0c;在网页上看到内容仅仅是服…

Modern Effective C++ 条款二十七:熟悉通用引用重载的替代方法

item26中说明对使用通用引用形参的函数&#xff0c;无论是独立函数还是成员函数&#xff0c;进行重载都会导致一系列问题。但是也提供了一些示例&#xff0c;如果能够按照我们期望的方式运行&#xff0c;重载可能也是有用的。这个条款探讨了几种通过避免在通用引用上重载的设计…

【RL Application】语义分割中的强化学习方法

&#x1f4e2;本篇文章是博主强化学习&#xff08;RL&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…

【C++】优先队列(Priority Queue)全知道

亲爱的读者朋友们&#x1f603;&#xff0c;此文开启知识盛宴与思想碰撞&#x1f389;。 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 一、前言 二、优先队列&#xff08;Priority Queue&#xff09…

【SQL】实战--组合两个表

题目描述 表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该表的主键&#xff08;具有唯一值的列&#xff09;…

STL:相同Size大小的vector和list哪个占用空间多?

在C中&#xff0c;vector和list是两种不同的序列容器。vector底层是连续的内存&#xff0c;而list是非连续的&#xff0c;分散存储的。因此&#xff0c;vector占用的空间更多&#xff0c;因为它需要为存储的元素分配连续的内存空间。 具体占用多少空间&#xff0c;取决于它们分…

《Serverless 架构:引领未来软件开发的新趋势》

一、引言 随着云计算技术的不断发展&#xff0c;软件开发模式也在不断演进。Serverless 架构作为一种新兴的云计算架构模式&#xff0c;正在逐渐改变着软件开发的方式和流程。本文将深入探讨 Serverless 架构的概念、特点、应用场景以及未来发展趋势。 二、Serverless 架构概述…

Java的关键字和保留字

理解什么是关键字&#xff1f; Java赋予了某些单词特殊意义&#xff0c;就不能自己在代码中起同名一样的&#xff0c;否则提示错误 【在Java中关键字都是小写的&#xff0c;并不是所有的小写字母都是关键字&#xff0c;一般在IDEA中显示高亮橘黄色】 理解什么是保留字&#xf…

三十二:HTTP 协议的基本认证

在 Web 开发中&#xff0c;HTTP 协议提供了一种简单的方式来进行身份验证&#xff0c;即 基本认证&#xff08;Basic Authentication&#xff09;。这种认证方式广泛应用于需要保护的资源或 API 接口&#xff0c;它通过在 HTTP 请求头中传递用户名和密码来验证用户身份。虽然基…

GPT vs Claude到底如何选?

美国当地时间6月20日&#xff0c;OpenAI的“劲敌”Anthropic公司发布了最新模型Claude 3.5 Sonnet。据Anthropic介绍&#xff0c;该模型是Claude 3.5系列模型中的首个版本&#xff0c;也是Anthropic迄今为止发布的“最强大、最智能”的模型。它不仅在性能上超越了竞争对手和自家…

Ubuntu 22.04 LTS vs Ubuntu 24.04 LTS:深度剖析,哪个版本更胜一筹?

在开源操作系统领域&#xff0c;Ubuntu一直以其稳定、易用和丰富的功能而受到广泛好评。随着Ubuntu 24的发布&#xff0c;许多用户开始关注这两个版本之间的差异&#xff0c;并考虑是否应该升级到最新版本。鼎峰新匯Benson将对比Ubuntu 22和Ubuntu 24&#xff0c;以帮助用户做出…

Ubuntu 22.04 离线安装软件包

在使用最小化安装时&#xff0c;默认是不带有vim 或者nano编辑器的&#xff0c;如果你的环境不能上外网就需要离线安装。 首先你需要先找一台可以上网的ubuntu系统&#xff08;虚拟机搭建也行&#xff09;&#xff0c;下载所有的依赖包&#xff0c;然后上传到需要安装的服务器…

k8s 1.28 二进制安装与部署

第一步 &#xff1a;配置Linux服务器 #借助梯子工具 192.168.196.100 1C8G kube-apiserver、kube-controller-manager、kube-scheduler、etcd、kubectl、haproxy、keepalived 192.168.196.101 1C8G kube-apiserver、kube-controller-manager、kube-scheduler、etcd、kubectl、…

unity中:Unity 中异步与协程结合实现线程阻塞的http数据请求

在 Unity 开发中&#xff0c;将协程与 C# 的 async/await 机制结合&#xff0c;可以显著提高代码的可读性与维护性&#xff0c;并且支持返回值。 异步与协程结合在数据请求中的优势 提高代码可读性&#xff1a; 与传统协程相比&#xff0c; async/await 更接近同步逻辑&#xf…

详解QtPDF之 QPdfLink

文章目录 前言QPdfLink 类介绍QPdfLink 的基本功能 QPdfLink 的成员函数1. QPdfLink()2. boundingRect() const3. target() const4. setTarget(const QUrl &target)5. isValid() const 使用 QPdfLink 的示例示例代码代码说明&#xff1a; 总结 前言 在处理 PDF 文档时&…

OGRE 3D----5. OGRE和QML事件交互

在现代图形应用程序开发中,OGRE(Object-Oriented Graphics Rendering Engine)作为一个高性能的3D渲染引擎,广泛应用于游戏开发、虚拟现实和仿真等领域。而QML(Qt Modeling Language)则是Qt框架中的一种声明式语言,专注于设计用户界面。将OGRE与QML结合,可以充分利用OGR…