vue3中使用keepalive和component

vue3和vue2中有些差异,直接上代码:

  <KeepAlive include="aComponent"><component :is='compList[active]'@goDetail="goDetail"@back="back" /></KeepAlive>  
<script setup lang="ts">
/*** 将事件从报告图表中抛上来,传递具体数据*/
import { ref ,markRaw} from 'vue'
import aComponent from './Acomponent.vue'
import bcomponent from './Bcomponent.vue'const dataDownConfig = ref(null);
const active = ref('aComponent');
const compList = ref({aComponent: markRaw(aComponent ),bComponent: markRaw(bComponent )
})
// 通过切换active的值来切换组件
const goDetail = (data: any) => {active.value = 'aComponent '
}
const back = () => {active.value = 'bcomponent '
}
</script>      

// Acomponent.vue (给组件加名字)

<script lang="ts" setup>
defineOptions({name: 'aComponent '
})
</script>

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

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

相关文章

lumbda常用操作

文章目录 lumbda的常用操作将List<String>转List<Integer>filter 过滤max 和min将List<Object>转为Map将List<Object>转为Map&#xff08;重复key&#xff09;将List<Object>转为Map&#xff08;指定Map类型&#xff09; lumbda的常用操作 将Li…

解释一下泛型擦除的概念,并讨论它对 Java 类型系统的影响

泛型是Java语言中一个非常重要的特性&#xff0c;它允许你在类、接口和方法中使用类型参数&#xff0c;从而使得代码更加通用、灵活和类型安全。 然而&#xff0c;在Java中&#xff0c;泛型的实现方式有一个特殊之处&#xff0c;被称为“类型擦除”&#xff08;Type Erasure&a…

读AI新生:破解人机共存密码笔记13有益机器

1. 标准模型 1.1. 我们能控制一个从外太空来的超级智能实体的概率几乎为零 1.2. 随着根据标准模型设计的机器变得更加智能&#xff0c;以及它们的行动范围遍及全球&#xff0c;关闭机器这种方法越来越不可行 1.2.1. 机器将会追求它们自己的目标&#xff0c;无论目标错得多么…

软件开发公司如何招开发工程师?

过去几年,各大公司的数字化举措都翻了一番。到 2026 年,全球数字化转型支出预计 将达到 3.4 万亿美元。 疫情引发的危机、激烈的竞争以及未知的消费者行为模式都让企业陷入困境。为了应对不断变化的形势,企业纷纷转向技术。 其中,移动应用是数字化的领军者之一。2022 年,…

《大道平渊》· 拾伍 —— 为什么做生意的人都欲望比较充足?

《大道平渊》 拾伍 " 欲壑难填&#xff0c;勇往直前。" 为什么做生意的人都欲望比较充足&#xff1f;因为没有人给他们发工资。 在自由市场上&#xff0c;对手渠道、组织运行效率、商业化…… 随时一波小浪&#xff0c;都能把你干下场。 . 我们毕竟不是真正的 食…

eNSP中DHCP的相关命令和配置

一、拓扑图 1.新建拓扑图 2.设置PC端 双击PC1&#xff0c;在基础配置下&#xff0c;将IPv4配置选择”DHCP“&#xff0c;点击“应用”。 PC2、PC3、PC4同样操作。 二、DHCP配置 1.g0/0/0口的配置 在AR1上的命令配置如下&#xff1a; <Huawei>system-view [Huawei]…

.NET 一款支持8种方式维持权限的工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

MySQL中Slow-log慢查询日志的作用

对于线上响应缓慢的问题&#xff0c;一步步的排查过程之后还未找到问题&#xff0c;最终就会来到数据库&#xff0c;尝试对SQL或索引调优&#xff0c;MySQL官方支持开启慢查询日志。 当一条SQL执行的时间超过规定的阈值后&#xff0c;就会被记录在慢查询日志中&#xff0c;当线…

CloudFlare Tunnel实现内网穿透

CloudFlare Tunnel 背景&#xff1a; 家中设备处于内网NAT环境&#xff0c;希望使用CF tunnel构建内网穿透的环境。 有了CF tunnel后&#xff0c;可实现&#xff1a; 家中的NAS可以直接SSH AWS的云服务可迁到到NAS NAT主机借助CF tunnel部署服务 步骤&#xff1a; clou…

数据结构——跳表Skip List

本文对跳表的定义、实现、应用等进行简单总结。 一、 介绍 1.定义 跳表&#xff08;Skip List&#xff09;&#xff1a;是一种概率性数据结构&#xff0c;由William Pugh在1990年提出&#xff0c;主要用于在有序的元素集合上进行快速的搜索、插入和删除操作。跳表的效率与平衡…

英语智汇学习系统

目 录 1 软件概述 1.1 项目研究背景及意义 2 系统相关技术 2.1 HTML、WXSS、JAVASCRIPT技术 2.2 Vanilla框架 2.3 uni-app框架 2.4 MYSQL数据库 3 需求分析 3.1 可行性分析 3.2 功能需求分析 3.3 系统用户及用例分析 3.4 非功能需求分析 3.5 数据流图…

windows USB 设备驱动开发-总章

通用串行总线 (USB) 提供可扩展的即插即用串行接口&#xff0c;确保外围设备的标准、低成本的连接。 USB 设备包括键盘、鼠标、游戏杆、打印机、扫描仪、存储设备、调制解调器、视频会议摄像头等。USB-IF 是一个特别兴趣组 (SIG)&#xff0c;负责维护官方 USB 规范、测试规范和…

如何提高项目风险的处理效率?5个重点

提高项目风险的处理效率&#xff0c;有助于迅速识别和应对风险&#xff0c;减少风险导致的延误&#xff0c;降低成本&#xff0c;提升项目质量&#xff0c;确保项目按时交付。如果项目风险处理效率较低&#xff0c;未能及时发现和处理风险&#xff0c;导致问题累积&#xff0c;…

小米汽车SU7全色系H5自适应展示源码

为了满足广大车迷和潜在消费者对小米汽车SU7全色系的视觉体验需求&#xff0c;我们特别推出了一款基于HTML的自适应H5源码&#xff0c;用于在线展示小米汽车SU7的全色系。这款源码不仅兼容各种设备和屏幕尺寸&#xff0c;而且能够完美地呈现出小米汽车SU7的优雅外观和精致细节。…

ucosii基础知识

文章目录 1. 嵌入式实时操作系统的基本概念2. 预备知识2.1. 指针2.2. 函数指针2.3. typedef常用方法 1. 嵌入式实时操作系统的基本概念 操作系统的概念&#xff1a; 操作系统(Operating System, OS)是一种系统软件。它在计算机硬件与计算机应用程序之间&#xff0c;通过提供应用…

【qt】CAD下

目录 一.前言二.缩放1.逻辑2.获取图形项选中的个数3.获取图形项并放大4.视图缩放5.完整代码6.效果展示7.缩小完整代码 三.旋转1.图形项进行旋转2.视图的旋转3.完整代码4.效果展示5.右转代码 四.恢复1.图形项复原2.视图复原3.完整代码4.效果展示 五.前后置1.设置z轴的值2.后置代…

C++ 中,extern c 是什么意思?

在C编程中&#xff0c;extern "C"是一个常见的声明&#xff0c;它主要用于解决C与C语言的互操作性问题。本文将深入探讨extern "C"的含义、用途和实现方式&#xff0c;帮助读者更好地理解和运用这一概念。 一、extern "C"的引入背景 C支持函数…

Linux 扩容 根分区

CentOS7&#xff0c;LVM根分区扩容步骤&#xff1a; LVM扩容思维流程&#xff1a;创建一个物理分区–>将这个物理分区转换为物理卷–>把这个物理卷添加到要扩展的卷组中–>然后才能用extend命令扩展此卷组中的逻辑卷 1.查看现有分区大小 df -TH 2.关机增加大小为40G(…

appinventor2中求某个值在列表中的索引用什么方法?

使用“求对象在列表中的位置”方法就可以了&#xff1a; 返回指定对象在列表中的位置&#xff0c;从 1 开始&#xff0c;如果不在列表中&#xff0c;则返回 0。 相应地&#xff0c;知道了索引&#xff0c;从列表中取值得方法是&#xff1a;选择列表中索引值对应的列表项 返回…

linux下安装kkFileView4

kkFileView为文件文档在线预览解决方案&#xff0c;该项目使用流行的spring boot搭建&#xff0c;易上手和部署&#xff0c;基本支持主流办公文档的在线预览&#xff0c;如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等 安装kkFileView前需要安装LibreOffic…