学习如何使用动态组件后，你会止不住的对它喜欢哒~~
介绍
<component>，一个用于渲染动态组件或元素的“元组件”。
Props
interface DynamicComponentProps {
is: string | Component
}
详细信息
要渲染的实际组件由 `is` prop 决定。
- 当 `is` 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。
- 或者，`is` 也可以直接绑定到组件的定义。
示例
按注册名渲染组件 (选项式 API)：
下面的示例是意思是当Math.random() > 0.5的值为true时显示Foo组件，反之显示Bar
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
<component :is="Math.random() > 0.5 ? Foo : Bar" />
</template>
了解完以上的步骤后，精彩才刚刚开始呢~
看到这里大家都已经知道，通过is属性可以控制要显示的组件，显示的组件是：全局注册的组件，当前页面注册的组件。
什么，可以用全局注册的组件？
是的，没错，可以使用全局注册的组件，例如：当项目中全局注册了UI库，或者项目自带的全局组件时，可以直接通过<component>显示。
例如：
<script setup>
const attr = {
type: 'primary',
round: true
}
</script>
<template>
<-- 示例一 -->
<component is="el-button" />
<-- 示例二 -->
<component is="el-button" type="primary" round />
<-- 示例三 -->
<component is="el-button" v-bind="attr" />
<-- 示例四：假设el-button由title插槽 -->
<component is="el-button" v-bind="attr">
<template #title>
// 自己想要展示的操作
</template>
</component>
</template>
通过以上的学习，在项目开发过程，如果有碰到通过不同条件展示不同的组件就可以用这个<component>组件啦。
不处意外的话，使用Vue的低代码平台的表单设计器或者其他设计器基本就运用了大量的<component>哟~
为什么这样说呢，我自己就使用<component>搭建一款高效的低代码引擎，请看结尾部分。
彩蛋
Hex Lowcode Engine
可视化拖拽式设计，快速开发页面，享受更多摸鱼时光...
文档链接：hles.zczchen.top/
产品链接：www.zczchen.top/hex-lowcode…
如果有想要了解的，可以联系我哟~
