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>