Vue3使用动态组件 Component
我不是程序媛lisa 2024-08-22 13:33:06 阅读 87
component是vue内置组件，主要作用是 动态渲染组件。本文主要介绍vue内置动态组件component的使用。
目录
一、动态组件的概念
二、使用场景
1、tab栏的切换
2、条件性地渲染组件
3、动态切换组件
4、异步加载组件
5、与路由结合使用
三、使用示例
一、动态组件的概念
多个组件通过component标签挂载在同一个组件中，通过触发动作进行动态切换，常搭配<keep-alive></keep-alive>使用。
二、使用场景
多用于以下几个场景：
1、tab栏的切换
管理系统中切换不同的菜单，展示tab，切换tab可以渲染不同组件，一般搭配<keep-alive></keep-alive>使用。
2、条件性地渲染组件
根据某个条件决定渲染哪个组件。通过在<code><component>元素上使用v-if指令来实现。
3、动态切换组件
根据用户的交互或状态变化，切换显示不同的组件。通过在<component>元素上使用is属性来指定要渲染的组件。
4、异步加载组件
当组件非常大或需要懒加载时，可以使用动态组件来异步加载组件，从而提高页面加载速度。
5、与路由结合使用
在路由配置中使用动态组件，根据不同的路由路径加载相应的组件。
三、使用示例
1、挂载组件
通过vue的defineAsyncComponent实现挂载组件
const CourseData = defineAsyncComponent(() => import("@/components/Chart/courseData.vue"));
2、component的is属性
<component :is="item.component" />code>
3、动态组件传值
动态组件的传值遵循基本组件传值规则，除了支持v-bind传值以外，还支持ref引用传值；使用引用传值需要注意的是，需要确定组件之后，再使用ref属性进行传值，否则将会无法获取应用组件的属性。使用v-bind传值代码如下所示：
<template>
<div>
<component :is="item.component" :data="reportData" :exam-data="exampData"/>code>
</div>
</template>
<script lang="ts" setup>code>
const CourseData = defineAsyncComponent(() => import("@/components/Chart/courseData.vue"));
const item = reactive({
component: CourseData
})
const reportData = ref("aaaaa")
const exampData = ref("bbbb")
</script>
4、动态组件数据缓存
若是数据需要动态渲染，组件切换之后会导致之前获得的数据丢失，这个时候，若我们想要在组件切换过程中保持这些组件的状态，避免重复渲染导致性能问题，则可以使用<keep-alive></keep-alive>包裹动态组件，来缓存组件中的数据：
<template>
<div>
<div id="dynamic-component-demo" class="demo">code>
<button
v-for="tab in tabs"code>
:key="tab"code>
:class="['tab-button', { active: currentTab === tab }]"code>
@click="currentTab = tab"code>
>
{ { tab }}
</button>
<keep-alive>
<component
:is="item.component"code>
class="tab"code>
></component>
</keep-alive>
</div>
</div>
</template>
四、总结
本篇文章就介绍到这里了，希望对你有帮助！
上一篇： 【Web世界探险家】3. CSS美学（二）文本样式
下一篇： SpringBootWeb 篇-深入了解会话技术与会话跟踪三种技术（Cookie 会话跟踪、Session 会话跟踪与 JWT 令牌会话跟踪）
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。