当前位置: 首页 > news >正文

Vue3使用component动态展示组件

前言:

最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合,其中有一个功能就是需要使用根据不同的字段,渲染不同的组件,查阅资料发现可以使用component完成这个功能,在实现的过程中也会遇见一些坑,总结如下,与君共勉。

官网:

组件基础 | Vue.js
有些场景会需要在两个组件间来回切换,比如 Tab 界面:需要通过 Vue 的 <component> 元素和特殊的 is attributel来实现:

<component :is="tabs[currentTab]"></component>

在上面的例子中,被传给 :is 的值可以是以下几种:

  • 被注册的组件名
  • 导入的组件对象

在两个组件之间进行切换: 

注意:is如果使用字符串会加载不出来传递给is的值应该为组件名


<template><Child1 /><Child2 /><component :is="flag ? StringField : NumberField"></component><el-button @click="flag = !flag">切换组件</el-button>
</template>
<script setup>import { ref } from 'vue'import StringField from './Child1.vue'import NumberField from './Child2.vue'const flag = ref(true)</script>

如果在多个组件之间进行选择:

注意:在选取type的时候需要使用computed

<template><component class="schema-item" :is="getComponentFlag" :schema="props.schema"></component>
</template><script lang="ts" setup>
import { defineProps, computed,ref} from "vue"
import StringField from "../../../lib/fields/StringField.vue"
import NumberField from "../../../lib/fields/NumberField.vue"
import ArrayField from "../../../lib/fields/ArrayField.vue"
import ObjectField from "../../../lib/fields/ObjectField.vue"
const type = ref("string")
// 根据 type 动态设置组件 需要使用计算属性
const getComponentFlag = computed(() => {switch (type.value) {case "string":return StringFieldcase "number":return NumberFieldcase "array":return ArrayFieldcase "object":return ObjectFieldcase "integer":return NumberFielddefault:console.warn(`${type.value} is not supported`)}
})
</script>

相关文章:

Vue3使用component动态展示组件

前言&#xff1a; 最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合&#xff0c;其中有一个功能就是需要使用根据不同的字段&#xff0c;渲染不同的组件&#xff0c;查阅资料发现可以使用component完成这个功能&#xff0c;在实现的过程中也会遇见一些坑&#x…...

嵌入式中间件_2.嵌入式中间件的分类

1.中间件的分类 中间件的范围十分广泛&#xff0c;针对不同的应用需求涌现出了多种各具特色的中间件产品。因此&#xff0c;在不同的角度或不同的层次上&#xff0c;对中间件的分类也会有所不同。 根据IDC在1998年对中间件进行的分类&#xff0c;把中间件分为终端仿真/屏幕转换…...

论文精读——KAN

目录 1.研究背景 2.关键技术 2.1 原始公式 2.2 KAN结构 2.3 缩放定律 3.技术扩展 4.模型效果 5.相关讨论 6.总结 文章标题&#xff1a;《KAN: Kolmogorov–Arnold Networks》 文章地址&#xff1a; KAN: Kolmogorov-Arnold Networks (arxiv.org)https://arxiv.org/a…...

全国产城市轨道交通运营公安AI高清视频监控系统

方案简介 城市轨道交通运营公安高清视频监控系统解决方案针对运营部门和公安部门的安保需求&#xff0c;选用华维视讯的各类前端和视频编解码、控制产品&#xff0c;通过统一平台提供视频监控服务和智能应用&#xff0c;满足轨道交通运营业主客运组织和抢险指挥的需求&#xff…...

python连接mysql数据库、FastAPI、mysql-connector-python

方法工具一、FastAPI 建议使用fast api中的pymysql pip3 install fastapi pip3 install pydantic pip3 install "uvicorn[standard]" pip3 中的3是 Python 3 版本的包管理器命令&#xff0c;用于安装和管理 Python 3 版本的第三方库。在某些系统中&#xff0c;同时…...

【idea】解决springboot项目中遇到的问题

一、Maven报错Could not find artifact com.mysql:mysql-connector-j:pom:unknown in aliyunmaven解决及分析 报错 创建springboot项目&#xff0c;勾选数据库驱动&#xff0c;springboot版本为3&#xff0c;现在改成了2.7.2&#xff0c;Maven就发生了报错Could not find art…...

ubuntu22.04禁止自动休眠的几种方式

在Ubuntu 20.04中&#xff0c;您可以通过以下几种方式禁用自动休眠功能&#xff1a; 使用systemd设置: sudo systemctl mask sleep.target suspend.target hibernate.target hybrid-sleep.target 修改/etc/systemd/logind.conf文件: sudo nano /etc/systemd/logind.conf 找…...

智能网站管理系统

智能网站管理系统&#xff0c;即智能化的网站管理工具&#xff0c;是为了提高网站管理效率和简化操作流程而开发的一种软件系统。它集合了各种先进的技术和功能&#xff0c;为网站管理员提供了一套强大而可靠的解决方案。 智能网站管理系统的核心功能是网站内容管理。传统的网站…...

Android Service学习笔记

1、Service介绍 Android Service&#xff08;服务&#xff09;是 Android 四大组件之一&#xff0c;主要作用是执行后台操作。它是一个后台运行的组件&#xff0c;执行长时间运行且不需要用户交互的任务。即使应用被销毁也依然可以工作。 Service并不是运行在一个独立的进程当…...

amr文件怎么转换成mp3?超好用的四种转换方法介绍!

amr文件怎么转换成mp3&#xff1f;在当今数字化时代&#xff0c;音频格式的多样性给我们带来了更广泛的选择&#xff0c;其中AMR格式就是其中之一&#xff0c;AMR格式在录音和通话领域得到广泛应用&#xff0c;但与此同时&#xff0c;它也存在一些挑战和局限性&#xff0c;尽管…...

翻转数位00

题目链接 翻转数位 题目描述 注意点 可以将一个数位从0变为1找出能够获得的最长的一串1的长度&#xff08;必须是连续的&#xff09; 解答思路 参照题解使用动态规划解决本题&#xff0c;对于任意一个位置i&#xff0c;dp[i][0]表示到达且包含第i位不翻转0最长1的长度&…...

工具:安装R语言的R包的各种方法

欢迎大家关注全网生信学习者系列&#xff1a; WX公zhong号&#xff1a;生信学习者Xiao hong书&#xff1a;生信学习者知hu&#xff1a;生信学习者CDSN&#xff1a;生信学习者2 介绍 R语言提供的大量R包为众多研究者提供了足够的工具&#xff0c;但是如何安装R包是很多人在使…...

注意力机制和Transformer模型各部分功能解释

文章目录 Transformer1、各部分功能解释2、通过例子解释a.输入预处理位置编码b.Encoder 的处理c.Decoder的输入Decoder的工作流程d.输出预测总结 Attention代码和原理理解 Transformer 运行机理&#xff1a; &#xff08;1&#xff09;假设我们需要进行文本生成任务。我们将已…...

短路是怎么形成的

1. 短路分为电源短路和用电器短路。 电源短路&#xff1a;电流不经过任何用电器&#xff0c;直接由正极经过导线流向负极&#xff0c;由于电源内阻很小&#xff0c;导致短路电流很大&#xff0c;特别容易烧坏电源。 用电器短路&#xff1a;也叫部分电路短路&#xff0c;即一根…...

【ZZULIOJ】1106: 回文数(函数专题)

题目描述 一个正整数&#xff0c;如果从左向 右读&#xff08;称之为正序数&#xff09;和从右向左读&#xff08;称之为倒序数&#xff09;是一样的&#xff0c;这样的数就叫回文数。输入两个整数m和n&#xff08;m<n)&#xff0c;输出区间[m&#xff0c;n]之间的回文数。…...

数据库设计规范总结

数据库设计规范总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 数据库设计规范是指在设计数据库时应该遵循的一系列规则和标准&#xff0c;旨在提高数据库…...

深度学习(九)——神经网络:最大池化的作用

一、 torch.nn中Pool layers的介绍 官网链接&#xff1a; https://pytorch.org/docs/stable/nn.html#pooling-layers 1. nn.MaxPool2d介绍 nn.MaxPool2d是在进行图像处理时&#xff0c;Pool layers最常用的函数 官方文档&#xff1a;MaxPool2d — PyTorch 2.0 documentation &…...

「前端+鸿蒙」鸿蒙应用开发-ArkTS语法说明-组件声明

ArkTS 是鸿蒙应用开发中的一个框架,它允许开发者使用 TypeScript 语法来创建声明式的用户界面。在 ArkTS 中,组件声明是构建 UI 的基础。以下是 ArkTS 快速入门的指南,包括组件声明的语法说明和示例代码。 ArkTS 快速入门 - 语法说明 - 组件声明 组件基础 在 ArkTS 中,组…...

python的subprocess 模块

subprocess 模块是 2.4 版本中新增的模块, 它允许您生成新进程&#xff0c;连接到它们的 输入 / 输出 / 错误 管道&#xff0c;并获得它们的返回码 (状态信息), 该模块的目的在于取代几个较旧的模块和功能 subprocess 模块可以用于执行系统命令, 拿到执行的结果, 速度比较的快…...

【Arc gis】使用DEM提取流域范围

地址&#xff1a;arcgis DEM 提取流域范围&#xff08;详细教程&#xff09;(空间分析--Hydrology)_gis的gridcode是什么意思-CSDN博客...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...