🦖欢迎观阅本本篇文章,我是Sam9029
文章目录
正文
动态组件
- 注意和
动态路由
之间有区别
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博客
**🐱🐉🐱🐉恭喜你,都看到这了,求赞,求收藏,求评论不过分吧**