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

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

---

正文

动态组件

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

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

---

1.1 Vue 自带组件

1

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

  
<component :is="componentId">component>  
  
  
<component :is="$options.components.child">component>  
  
  
<component :is="condition ? 'FooComponent' : 'BarComponent'">component>  
  
  
<component :is="true ? 'a' : 'span'">component>  
1
2
3
4
5
6
7
8
9
10
11

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

• 例如 输入框 的数据

<keep-alive>
    <component :is='ComponentName'>
keep-alive>
1
2
3

---

🦖欢迎查阅Sam9029 的其他文章

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

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

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

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