前言

Vue 3作为一个前端框架，提供了丰富的功能来构建动态且响应式的用户界面。在众多功能中，<component>标签是一个强大的特性，它允许我们动态地渲染不同的组件。这在创建灵活且可重用的UI组件时非常有用。本文将详细介绍如何在Vue 3中使用<component>标签

基本使用

<component>，一个用于渲染动态组件或元素的“元组件”。

Props

interface DynamicComponentProps {
  is: string | Component
}

要渲染的实际组件由 is 决定。

• 当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。
• 或者，is 也可以直接绑定到组件的定义。

示例

<script setup>
// 引入组件  
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import Comp1 from './Comp1.vue'
import Comp2 from './Comp2.vue'
// 创建组件map
const ComponentMap = {
  0:Foo,
  1:Bar,
  2:Comp1,
  3:Comp2
}
const AllData = 
</script>

<template>

   <div v-for="componentItem in AllData" :key="dataItem.id">
        <component
          :is="ComponentMap[componentItem.type]"  // 控制组件显示，后端只需要保存数字状态
          :compData="componentItem.data" // 传参数
        />
   </div>
</template>