vue3动态组件未渲染问题

news2024/11/16 11:50:04

渲染问题

在这里插入图片描述

component动态组件写法与vue2写法一致,代码如下:

<component :is="componentName"/>
<script setup>
	import { ref } from 'vue'
	import account from './user/account.vue'
	// 组件名称
	const componentName = ref('account')
	// 点击左侧菜单
	const onChangeTab = (name) => {
		componentName.value = name
	}
</script>

解决方法

由于使用setup语法糖时,动态组件失效,所以需要使用shallowReactive()转换下

<component :is="dom[componentName]"/>
	import { ref, shallowReactive } from 'vue'
	import account from './user/account.vue'
	import password from './user/password.vue'
	const dom = shallowReactive({
		account,
		password
	})
	// 组件名称
	const componentName = ref('account')
	// 点击左侧菜单
	const onChangeTab = (name) => {
		componentName.value = name
	}

最终效果

在这里插入图片描述

在这里插入图片描述
参考文章:https://www.jianshu.com/p/6403f8792b34

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

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

相关文章

密码学——MAC

消息认证码 在信息发送和接收过程中,若攻击者能够得到信息,进行篡改,就能达到欺骗,诈骗,冒名顶替的作用。为了防止冒名诈骗,一个对策就是使用消息认证码——MAC: Message Authentication Code。 消息认证码,即确定消息真实性的认证程序。发件人将想要发送的信息和从哪个…

挑战OpenAI的新模型免费上线,40%计算量性能逼近GPT-4

据介绍,Inflection-2.5 将强大的 LLM 能力与 Inflection 标志性的「同理心微调」结合在一起,兼具高情商与高智商,可联网获取事实信息,其性能可与 GPT-4、Gemini 等领先大模型相媲美。 本周四,美国 AI 创业公司 Inflection AI 正式发布新一代大语言模型 Inflection-2.5。 …

es 聚合操作(二)

书接上文&#xff0c;示例数据在上一篇&#xff0c;这里就不展示了 一、Pipeline Aggregation 支持对聚合分析的结果&#xff0c;再次进行聚合分析。 Pipeline 的分析结果会输出到原结果中&#xff0c;根据位置的不同&#xff0c;分为两类&#xff1a; Sibling - 结果和现有…

Github 2024-03-15 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-15统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目3Python项目3非开发语言项目2PHP项目1C#项目1Rust项目1《Hello 算法》:动画图解、一键运行的数据结构与算法教程 创建周期:476…

N沟道功率MOSFET--FDA59N30 助力提高电源效率 为设备节能做出贡献

FDA59N30 UniFETTM MOSFET 是高压 MOSFET产品&#xff0c;基于平面条形和 DMOS 技术。 该 MOSFET 产品专用于降低通态电阻&#xff0c;并提供更好的开关性能和更高的雪崩能量强度。适用于开关电源转换器应用&#xff0c;如功率因数校正&#xff08;PFC&#xff09;、平板显示器…

c++简单使用

取消同步流是为了解决C有时遇到空格或回车&#xff08;不到\0&#xff09;就会停下的问题 #include<bits/stdc.h> using namespace std; int main() {//取消同步流ios::sync_with_stdio(0), cin.tie(0), cout.tie(0);int a, b;cin >> a>> b;cout << …

上海亚商投顾:沪指三连阴 创新药、资源回收概念逆势走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数昨日冲高回落&#xff0c;深成指、创业板指午后跌超1%&#xff0c;临近尾盘跌幅有所收窄。创新药板块…

kyuubi整合微服务效果整理

目录 概述展示整合效果nacosadmin server请求 结束 概述 在各种奇葩需求之下&#xff0c;公司大数据&#xff0c;在资源不够的情况下&#xff0c;还要做资源高配的负载均衡&#xff0c;虽说非正道。但还是试一下。 展示 整合 整合 nacos 做资源配置动态刷新整合 spring boo…

Spring Boot 中@Scheduled是单线程还是多线程?

在开发Spring Boot应用程序时&#xff0c;定时任务是一项常见的需求。Spring Boot提供了Scheduled注解&#xff0c;可用于将方法标记为定时任务&#xff0c;并在预定的时间间隔内执行。那么Scheduled注解的执行方式是单线程执行&#xff0c;还是多线程执行&#xff1f;Schedule…

【Redis】Redis常用命令之Hash

1.hset&#xff1a;设置hash中指定的字段&#xff08;field&#xff09;的值&#xff08;value&#xff09;。 HSET key field value [field value ...]时间复杂度&#xff1a;插⼊⼀组field为O(1),插⼊N组field为O(N)。 返回值&#xff1a;添加的字段的个数。 2.hget&#xf…

【视觉三维重建】【论文笔记】Deblurring 3D Gaussian Splatting

去模糊的3D高斯泼溅&#xff0c;看Demo比3D高斯更加精细&#xff0c;对场景物体细节的还原度更高&#xff0c;[官网]&#xff08;https://benhenryl.github.io/Deblurring-3D-Gaussian-Splatting/&#xff09; 背景技术 Volumetric rendering-based nerual fields&#xff1a…

邀请媒体到场报道与采访的优势分析

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体到场报道与采访的优势主要有&#xff1a; 提高知名度和曝光率&#xff1a;通过媒体的广泛传播&#xff0c;让更多人了解活动或品牌&#xff0c;增强其在公众中的认知度。 树立权…

自动化运维工具Ansible

目录 一.Ansible基本内容 1.定义 2.特点与优势 优势&#xff1a; &#xff08;1&#xff09;轻便性&#xff1a;无需在被控制服务器上安装客户端&#xff0c;Ansible基于ssh协议 &#xff08;2&#xff09;幂等性&#xff1a;大部分模块有幂等性&#xff0c;即如果输入sys…

Git概述及安装步骤

一、Git简介 Git是一个免费的、开源的分布式版本控制系统&#xff0c;可以快速高效地处理从小型到大型的各种项目。Git 易于学习&#xff0c;占地面积小&#xff0c;性能极快。它具有廉价的本地库&#xff0c;方便的暂存区域和多个工作流分支等特性。其性能优于Subversion、CV…

鸿蒙 - 读取 rawfile 中的 json 文件

一、说明 在以下目录中存放了一份地区 json 文件。 我想要将其读出来&#xff0c;并且转为我的实体类。 二、技术实现 import common from ohos.app.ability.common import { CityEntity } from ./entity/CityEntity import util from ohos.util;/*** App 内置的地区数据* r…

pytorch之诗词生成3--utils

先上代码&#xff1a; import numpy as np import settingsdef generate_random_poetry(tokenizer, model, s):"""随机生成一首诗:param tokenizer: 分词器:param model: 用于生成古诗的模型:param s: 用于生成古诗的起始字符串&#xff0c;默认为空串:return: …

深度解析Java JDK 1.8中Stream流的源码实现:带你探寻数据流的奥秘

文章目录 一、 Stream流概述1.1 什么是Stream流&#xff0c;以及它的主要特点和优势1.2 Stream流的基本操作&#xff1a;过滤、映射、排序等 二、 Stream流源码解析2.1 接口和基本概念2.2 创建流2.3 源码分析2.3.1 流的起始2.3.2 流的初始2.3.3 认识BaseStream2.3.4 Stream接口…

软考高级:软件工程单元测试(驱动模块、被测模块、桩模块)概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

Qt 线程池 QThreadPool

一.Qt 线程池 QThreadPool介绍 Qt线程池是一种管理多个线程的并发编程模型&#xff0c;通过使用线程池可以提高性能、控制并发度、提供任务队列和简化线程管理。 在Qt中&#xff0c;线程池的使用主要涉及以下几个步骤&#xff1a; 创建任务类&#xff1a;需要定义一个任务类&am…

【计算机视觉】一、计算机视觉概述

文章目录 一、计算机视觉二、计算机视觉与其它学科领域的关系1、图像处理2、计算机图形学3、模式识别4、人工智能&#xff08;AI&#xff09;5、神经生理学与认知科学 三、计算机视觉的应用1. 人脸识别2. 目标检测3. 图像生成4. 城市建模5. 电影特效6. 体感游戏动作捕捉7. 虚拟…