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

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

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

相关文章

【算法】一类支持向量机OC-SVM(1)

【算法】一类支持向量机OC-SVM 前言一类支持向量机OC-SVM 概念介绍示例编写数据集创建实现一类支持向量机OC-SVM完整的示例输出 前言 由于之前毕设期间主要的工具就是支持向量机&#xff0c;从基础的回归和分类到后来的优化&#xff0c;在接触到支持向量机还有一类支持向量机的…

unity

Unity官方下载_Unity最新版_从Unity Hub下载安装 | Unity中国官网 Unity Remote - Unity 手册 登陆账号&#xff0c;找到一个3d 免费资源 3D Animations & Models | Unity Asset Store unity 里面window->package Manager 里面可以看到自己的asset &#xff0c;下载后…

MySQL 数据库压力测试

文章目录 前言1. 安装部署1.1 二进制安装1.2 源码安装 2. 服务器性能测试2.1 CPU2.2 内存2.3 磁盘 3. MySQL 基准测试3.1 参数解析3.2 压测命令3.3 输出解读3.4 结果分析 前言 Sysbench 是一个开源的多线程基准测试工具&#xff0c;也是目前使用最多的 MySQL 压力测试工具。本…

树莓派与电脑视频实时传输实现

编程环境 1、 树莓派 4B 2、 windows 编程语言 python 应用 tkinter scoket opencv 效果 视频同传 服务端视频初始化 服务端视频读取 windows 客户端接收视频流&#xff0c;队列存储 解析视频&#xff0c;存入队列 ui页面数据刷新 下载链接&#xff1a;https://…

elasticsearch篇:数据聚合

1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些…

VUE3项目学习系列--Axios二次封装(五)

Axios中文文档 | Axios中文网 (axios-http.cn) Axios 是一个基于 promise 网络请求库&#xff0c;作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequ…

【洛谷 P8637】[蓝桥杯 2016 省 B] 交换瓶子 题解(贪心算法)

[蓝桥杯 2016 省 B] 交换瓶子 题目描述 有 N N N 个瓶子&#xff0c;编号 1 ∼ N 1 \sim N 1∼N&#xff0c;放在架子上。 比如有 5 5 5 个瓶子&#xff1a; 2 , 1 , 3 , 5 , 4 2,1,3,5,4 2,1,3,5,4 要求每次拿起 2 2 2 个瓶子&#xff0c;交换它们的位置。 经过若干次…

解释器模式(Interpreter Pattern)

解释器模式 说明 解释器模式&#xff08;Interpreter Pattern&#xff09;属于行为型模式&#xff0c;是指给定一门语言&#xff0c;定义它的语法&#xff08;文法&#xff09;的一种表示&#xff0c;并定义一个解释器&#xff0c;该解释器使用该表示来解释语言中的句子。是一…

[NSSRound#18 Basic]web解析

文章目录 门酱想玩什么呢&#xff1f;Becomeroot 门酱想玩什么呢&#xff1f; 打开题目&#xff0c;加载完视频后要求我们给个游戏链接 点开评论区不难发现应该是想玩元梦之星&#xff0c;这里有个评论功能可以上传图片 我们随便输入点东西发现是插入并赋值到content元素里面 …

提示找不到MSVCP140.dll无法继续执行此代码的多种解决方法

当计算机系统在运行过程中突然提示“丢失MSVCP140.dll”这一错误信息时&#xff0c;意味着系统无法找到并加载这个至关重要的动态链接库文件。MSVCP140.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;对于许多基于Windows的应用程序来说&#xff0c;尤其…

Exam in MAC [容斥]

题意 思路 正难则反 反过来需要考虑的是&#xff1a; (1) 所有满条件一的(x,y)有多少对&#xff1a; x 0 时&#xff0c;有c1对 x 1 时&#xff0c;有c对 ...... x c 时&#xff0c;有1对 以此类推 一共有 (c2)(c1)/2 对 (2) 符合 x y ∈ S的有多少对&#xff1a…

openssl3.2 - note - Getting Started with OpenSSL

文章目录 openssl3.2 - note - Getting Started with OpenSSL概述笔记openssl 历史版本Configure 选项开关支持的OSopenssl 文档简介安装新闻每个平台的安装文档支持的命令列表配置文件格式环境变量 END openssl3.2 - note - Getting Started with OpenSSL 概述 看到官方文档…

物联网技术助力智慧城市转型升级:智能、高效、可持续

目录 一、物联网技术概述及其在智慧城市中的应用 二、物联网技术助力智慧城市转型升级的路径 1、提升城市基础设施智能化水平 2、推动公共服务智能化升级 3、促进城市治理现代化 三、物联网技术助力智慧城市转型升级的成效与展望 1、成效显著 2、展望未来 四、物联网技…

【C++初阶】C++入门(上)

C的认识 ①什么是C&#xff1f; ​ C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。 ​ 于是1982年&#xff0c;Bjarne Stroustrup&#xff08;本…

D-阿洛酮糖-DAEase酶固定化载体及混合糖液分离

#D-阿洛酮糖-DAEase酶固定化载体及混合糖液分离 ​阿洛酮糖为白色固体晶体&#xff0c;无气味&#xff0c;具有较大的溶解度&#xff0c;柔和的口感&#xff0c;其具有传统甜味剂蔗糖70%的甜度&#xff0c;却几乎不提供任何热量。其与食物中的蛋白质&#xff0c;如鸡蛋蛋白发生…

ntp 部署

文章目录 简介ntp和ntpdate区别环境准备启动 简介 ntp全名 network time protocol 。NTP服务器可以为其他主机提供时间校对服务 ntp和ntpdate区别 两个服务都是centos自带的&#xff08;centos7中不自带ntp&#xff09;。ntp的安装包名是ntp&#xff1b;ntpdate的安装包是ntp…

【leetcode+深度/广度优先搜索】841. 钥匙和房间 (DFS,BFS)

leetcode-cn&#xff1a;leetcode面试75道精华&#xff1a;https://leetcode.cn/studyplan/leetcode-75/ 841.钥匙和房间&#xff1a;https://leetcode.cn/problems/keys-and-rooms/description/ 一、题目&#xff1a;841. 钥匙和房间 有 n 个房间&#xff0c;房间按从 0 到 n…

一对多文件传输该如何优化?

在数字化转型的浪潮中&#xff0c;企业对高效、安全的一对多文件传输需求日益增长。传统的文件传输方式&#xff0c;如纸质文件、电子邮件和FTP等&#xff0c;虽然在某些场景下仍然发挥作用&#xff0c;但在处理大规模、高频率的数据传输时&#xff0c;它们的局限性逐渐显现。本…

详细介绍Seq2Seq、Attention、Transformer !!

文章目录 前言 1、Seq2Seq工作原理 核心思想 工作原理 Encoder&#xff08;编码器&#xff09; Dncoder&#xff08;解码器&#xff09; 2、Attention工作原理 核心逻辑&#xff1a;从关注全部到关注重点 工作原理 Encoder&#xff08;编码器&#xff09; Decoder&#xff08;解…

vue实现微信自带浏览器分享(小卡片形式)

注意&#xff1a;只能在微信自带浏览器打开进行分享 1.图片效果 2.cdn引入weixin-js-sdk的依赖 在index.html中引入 <script src"https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2.在assets/js文件夹中创建share.js文件 import axios fr…