猿创征文｜【Vue3】动态组件的使用

🦖欢迎观阅本本篇文章，我是Sam9029

---

正文

动态组件

Vue3.0动态组件 - ZeFeng Blog (00feng00.github.io)

• 注意和 动态路由 之间有区别

---

1.1 Vue 自带组件 <component :is='ComponentName'>

<component :is='ComponentName'>

在 Vue 3 中为我们提供了一个 component 内置组件，该组件可以渲染一个 “元组件” 为动态组件。根据 is 的值，来决定哪个组件被渲染。如果 is 的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。对应的使用示例如下：

<!--  动态组件由 vm 实例的 `componentId` property 控制 -->  
<component :is="componentId"></component>  
  
<!-- 也能够渲染注册过的组件或 prop 传入的组件-->  
<component :is="$options.components.child"></component>  
  
<!-- 可以通过字符串引用组件 -->  
<component :is="condition ? 'FooComponent' : 'BarComponent'"></component>  
  
<!-- ⭐可以用来渲染原生 HTML 元素 -->  
<component :is="true ? 'a' : 'span'"></component>  

1.2 结合 keep-alive 使用 （可缓存在 动态组件 中的数据 ）

• 例如 输入框 的数据

<keep-alive>
    <component :is='ComponentName'>
</keep-alive>

---

🦖欢迎查阅Sam9029 的其他文章

🐸【Vue3-响应式工具API】ref 和 reactive 使用_Sam9029的博客-CSDN博客

🐸(Aixos的引入与基本使用_Sam9029的博客-CSDN博客

🐸【JS-工具类】懒加载的实现 – 两种方式 — 一种5行JS实现懒加载_Sam9029的博客-CSDN博客

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**