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>

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

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

相关文章

新火种AI|Sora发布半年之后,AI视频生成领域风云再起

作者&#xff1a;一号 编辑&#xff1a;美美 AI视频最近有些疯狂&#xff0c;Sora可能要着急了。 自OpenAI的Sora发布以来&#xff0c;AI视频生成技术便成为了科技界的热门话题。尽管Sora以其卓越的性能赢得了广泛关注&#xff0c;但其迟迟未能面向公众开放&#xff0c;让人…

[渗透测试学习] BoardLight-HackTheBox

BoardLight-HackTheBox 信息搜集 nmap扫描一下 nmap -sV -v 10.10.11.11扫描结果如下 PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 8.2p1 Ubuntu 4ubuntu0.11 (Ubuntu Linux; protocol 2.0) 80/tcp open http Apache httpd 2.4.41 ((Ubuntu))80端口有h…

vue项目中form data形式传参方式

前端处理 let file new FormData() file.append(ossFilePath, /lessee1/testToHtml2.docx) file.append(type, 2html) toHtml(file).then(res > { export function toHtml(file) { return request({ url: /iot/api/public/wordsToHTML, method: post, data: f…

【vue baidu-map】解决更新数据,bm-marker显示不完全问题

实现效果&#xff1a; 问题&#xff1a;切换上面基地tab键&#xff0c;导致地图图标展示不完全&#xff1b;刷新页面就可以正常展示。判断是<bm-marker>标记元素没有动态刷新dom元素引起的问题。 方案&#xff1a;this.$nextTick({}) this.$nextTick(()>{this.equipm…

用户需求分析揭秘:最佳实践与策略

大多数产品团队都有自己处理客户需求的一套流程。但是那些潜在的客户和他们的需求呢&#xff1f;如果在产品管理上已经有一定的资历&#xff0c;很可能对此见惯不怪了。 通常&#xff0c;这些需求是销售人员跑来告诉你的&#xff0c;大概就是说&#xff1a;“超棒的潜在客户一…

Leetcode Hot100之哈希表

1. 两数之和 题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现思路…

ReentrantLock可重入锁

可重⼊锁&#xff0c;这个锁可以被线程多次重复进⼊进⾏获取操作。 ReentantLock继承接⼝Lock并实现了接⼝中定义的⽅法&#xff0c;除了能完成synchronized所能完成的所有⼯作 外&#xff0c;还提供了诸如可响应中断锁、可轮询锁请求、定时锁等避免多线程死锁的⽅法。 在并发量…

Stage模型

1、Stage模型介绍 HarmonyOS 3.1&#xff08;API 9&#xff09;新增模型。提供了Ability Stage和Window Stage类作为应用组件和window窗口的“舞台” 2、Stage模型的Ability生命周期 Ability的生命周期包括 create&#xff0c;Foreground&#xff0c;Background&#xff0c;…

Airbind - hackmyvm

简介 靶机名称&#xff1a;Airbind 难度&#xff1a;中等 靶场地址&#xff1a;https://hackmyvm.eu/machines/machine.php?vmAirbind 本地环境 虚拟机&#xff1a;vitual box 靶场IP&#xff08;Airbind&#xff09;&#xff1a;192.168.56.121 跳板机IP(windows 11)&…

Java开发的构建神器:Maven以及如何安装部署Maven

目录 一、Maven引言1.1 Maven的核心概念✍. POM (Project Object Model)✌. 依赖管理✍. 生命周期与构建阶段✌. 插件系统 1.2 Maven的工作流程✍. 读取POM文件&#xff1a;✌. 依赖解析&#xff1a;✍. 构建生命周期&#xff1a;✌. 插件执行&#xff1a;✍. 构建输出&#xf…

测试驱动开发TDD

如何在后端测试代码&#xff0c;测试一个其前端的请求&#xff0c;能否正常处理 以登录请求为例 package com.example.demo.login;import com.example.demo.login.pojo.User; import com.fasterxml.jackson.databind.ObjectMapper; import org.junit.jupiter.api.Test; import…

C++使用教程

目录 一、软件使用 二、C基础规则补充 关键字 整型取值范围 浮点型取值范围 字符型使用规则 字符串型使用规则 布尔类型 常用的转义移字符 三、数组、函数、指针、结构体补充 1.数组 2.函数 声明&#xff1a; 分文件编写&#xff1a; 值传递&#xff1a; 3.指…

Coursera耶鲁大学金融课程:Financial Markets 笔记Week 02

Financial Markets 本文是学习 https://www.coursera.org/learn/financial-markets-global这门课的学习笔记 这门课的老师是耶鲁大学的Robert Shiller https://en.wikipedia.org/wiki/Robert_J._Shiller Robert James Shiller (born March 29, 1946)[4] is an American econom…

Vue3鼠标悬浮个人头像时出现修改头像,点击出现弹框,上传头像使用cropperjs可裁剪预览

实现效果&#xff1a; 鼠标悬浮到头像上&#xff0c;下方出现修改头像 点击修改头像出现弹框&#xff0c;弹框中可上传头像&#xff0c;并支持头像的裁剪及预览 实现方式&#xff1a; 1.tempalte中 <div class"img-box"><img v-if"avatarImgUrl&qu…

JavaScript 传参方法

1. 值传递 在 JavaScript 中&#xff0c;基本类型&#xff08;也称为原始类型&#xff09;包括 undefined、null、boolean、number、string、bigint 和 symbol。这些类型在函数调用时是通过值传递的&#xff0c;这意味着在函数内部修改参数的值不会影响函数外部的原始值。 fu…

常见的网络设备

引入 园区网络安全部署场景 1、路由器&#xff1a; 跨网段通信设备 。 2、交换机&#xff1a; 同网段或跨网段通信设备。 3、AntiDDoS &#xff1a; DDoS 防御系统&#xff0c;通常旁挂部署于网络出口处&#xff0c; 位于防火墙上游&#xff0c;用于减轻防火墙报文处理负担。 …

CENTOS7.9下服务器双网卡bond模式6配置示例

​1.bond口的特点 bond口通过将多个网口进行聚合&#xff0c;多个网口聚合后一方面实现了大带宽传输&#xff0c;另外多网口聚合后也同时具有冗余特性&#xff0c;当其中一个网口down掉后&#xff0c;其他网口会继续转发流量&#xff0c;不会导致流量中断。 2.使用条件 当环境…

CAD二次开发(10)-单行文字的添加+图形修改

1. 单行文字的添加 第一步&#xff1a; 首先在CAD中新增中文样式 输入ST命令&#xff1a; 第二步&#xff1a;代码开发 /// <summary>/// 添加文本信息/// </summary>[CommandMethod("AddText")]public void AddText(){var doc Application.DocumentM…

全氟己酮自动灭火材料表现亮眼!手把手教你自动灭火毯的使用方法

灭火毯的使用方法是什么&#xff1f;很多朋友在购买灭火毯之前&#xff0c;都比较关心这个问题。在这里&#xff0c;我们可以把灭火毯分为两种。一种是传统灭火毯&#xff0c;还有一种是近年来兴起的高科技产品—全氟己酮自动灭火毯。这两种灭火毯的使用方法大有不同&#xff0…

[算法刷题—二分法]寻找插入位置

题目展示: 本道题本身并不是很难,主要是学习和分析二分查找插入位置的方法。 首先大体上分为两种情况: 一.target在待查找的数组之中,返回对应值的下标索引。 二.target不在待查找的数组之中&#xff0c;需要返回target插入位置的索引(原数组有序) 第一种情况不难&#xff…