vue3动态组件未渲染问题

渲染问题

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux arrch64系统架构 py文件运行时的编码问题解决

问题&#xff1a; 因为要测试一些东西&#xff0c;所以必须有中文数据来做支撑&#xff0c;之前用的架构是x86&#xff0c;现在一个服务器的架构为arrch64&#xff0c;下列编码都挨个都进行声明&#xff0c;但是无法解决问题&#xff0c;总是报错 # -*- coding: gbk -*- # -*…

数组的大小与元素的个数

一、数组的大小 数组一旦声明&#xff0c;大小就确定了&#xff0c;无论元素是否填充 以大括号声明的数组&#xff0c;数组大小和大括号中元素的数量是一致的 以双引号字符串声明的字符数组&#xff0c;数组大小比字符的个数多一个 sizeof(数组名)得到的是元素类型所占字节…

一行代码极速部署:打造面向开发者的流计算平台

作者&#xff1a;Yingjun Wu TL;DR. curl https://risingwave.com/sh | sh在2021年初&#xff0c;我创立了RisingWave&#xff0c;目标是推广流计算技术的普及。在过去的三年中&#xff0c;我不断的向市场布道RisingWave&#xff0c;希望RisingWave能够在流计算这一市场中占…

精简版 Obsidian 图床配置 PicGo+ gitee

精简版 Obsidian 图床配置 PicGo gitee 图床的作用 图床&#xff08;Image Hosting Service&#xff09;是一种在线服务&#xff0c;用于存储和托管用户上传的图片文件。用户可以将图片上传到图床服务器&#xff0c;并获得一个可访问的图片链接&#xff0c;然后可以在网页、博…

【Stable Diffusion】入门-01:原理简介+应用安装(Windows)+生成步骤

【Stable Diffusion】入门&#xff1a;原理简介应用安装&#xff08;Windows&#xff09;生成步骤 原理简介应用安装 原理简介 稳定扩散生成模型(Stable Diffusion)是一种潜在的文本到图像扩散模型&#xff0c;能够在给定任何文本输入的情况下生成照片般逼真的图像。 应用安…

谷歌的后量子密码学威胁模型

1. 引言 若现在不使用量子安全算法来加密数据&#xff0c;能够存储当前通信的攻击者最快十年内就能对其解密。这种先存储后解密的攻击是当前采用后量子密码学 (post-quantum cryptography&#xff0c;PQC) 背后的主要动机&#xff0c;但其他未来的量子计算威胁也需要一个深思熟…

macOS - 获取硬件设备信息

文章目录 1、CPU获取方式 一&#xff1a; system_profiler获取方式二&#xff1a;sysctl&#xff0c; machdepmachdep 2、内存3、硬盘4、显卡5、声卡6、光驱7、系统序列号8、型号标识符9、UUID 等信息 10. 计算机名称 1、CPU 获取方式 一&#xff1a; system_profiler % syst…

CKA认证之Etcd备份与恢复

题目介绍&#xff1a; 资料参考&#xff1a; https://kubernetes.io/zh-cn/docs/tasks/administer-cluster/configure-upgrade-etcd 解题&#xff1a; 1、备份 #参考模板列出 etcdctl 可用的各种选项。 #例如&#xff0c;你可以通过指定端点、证书和密钥来制作快照&#xff0…

计算机视觉——目标检测(R-CNN、Fast R-CNN、Faster R-CNN )

前言、相关知识 1.闭集和开集 开集&#xff1a;识别训练集不存在的样本类别。闭集&#xff1a;识别训练集已知的样本类别。 2.多模态信息融合 文本和图像&#xff0c;文本的语义信息映射成词向量&#xff0c;形成词典&#xff0c;嵌入到n维空间。 图片内容信息提取特征&…

大语言模型提示词技巧

LLM&#xff08;Large Language Model&#xff09;大语言模型时代&#xff0c;提示词&#xff08;Prompt&#xff09;很重要&#xff0c;而改进提示词显然有助于在不同任务上获得更好的结果。这就是提示工程背后的整个理念。 下面我们将介绍更高级的提示工程技术&#xff0c;使…

【办公类-40-01】20240311 用Python将MP4转MP3提取音频 (家长会系列一)

作品展示&#xff1a; 背景需求&#xff1a; 马上就要家长会&#xff0c;我负责做会议前的照片滚动PPT&#xff0c;除了大量照片视频&#xff0c;还需要一个时间很长的背景音乐MP3 一、下载“歌曲串烧” 装一个IDM 下载三个“串烧音乐MP4”。 代码展示 家长会背景音乐: 歌曲串…

科普|大数据信用高风险形成原因,怎么查询?

在大数据时代&#xff0c;基于大数据技术的大数据信用风险在很多时候是很多机构比较重视的问题&#xff0c;大数据信用风险主要包括多头借贷风险、履约行为风险、联系人风险、司法风险等。本文将详细为大家讲讲大数据信用高风险是怎么形成的?怎么查询?一起去了解一下吧。 大数…

leetCode刷题 13. 罗马数字转整数

目录 题目&#xff1a; 1. 思路 2. 解题方法 3. 复杂度 4. Code 题目&#xff1a; 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L …

Python 多种字符串处理函数介绍

Python 提供了丰富的字符串处理函数&#xff0c;用于执行各种字符串操作&#xff0c;如查找、替换、截取、转换等。以下是一些常用的 Python 字符串处理函数及其用法&#xff1a; 字符串长度和大小写转换 1. **len()**&#xff1a;返回字符串的长度。 2. **upper()**&#xff1…

如何区分工业以太网交换机和常规以太网交换机

工业以太网交换机和常规以太网交换机乍一看似乎很相似&#xff0c;但两者之间存在着一些关键区别。在本文中&#xff0c;我们将阐明这些差异&#xff0c;并为您提供一些快速区分两者的提示。 工业以太网交换机与常规以太网交换机的比较 工业以太网交换机和常规以太网交换机都…

[ai笔记15] openAI官方提示词工程文档(图文重排版本)

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第15篇分享&#xff01; 最近在学习prompt提示词技巧&#xff0c;一番研究发现其实提示词的技巧并不是限定死的&#xff0c;所谓技巧和心法更像是教导我们如何更清晰、更结构化的大模型聊天工具进行沟通…

SpringBoot +WebSocket应用

我们今天不研究原理&#xff0c;只看应用。 什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455&#xff0c;并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数…

Redis-复制功能

0 序言 复制功能是Redis提供的多机功能中最基础的一个&#xff0c;这个功能是通过主从复制&#xff08;master-slave replication&#xff09;模式实现的&#xff0c;它允许用户为存储着目标数据库的服务器创建出多个拥有相同数据库副本的服务器&#xff0c;其中存储目标数据库…

ES6:箭头函数中的this指向问题

普通函数中的this指向函数的调用者 例子&#xff1a; 黑马程序员的说法&#xff1a;箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this 尚硅谷的说法&#xff1a;this始终指向函数声明时所在作用域下的this的值 通俗理解就是箭头函数中找this&…

c#简易学生管理系统

https://pan.baidu.com/s/1kCPvWg8P5hvlf26nGf2vxg?pwdya45 ya45