Vue3使用动态组件 Component

最新推荐文章于 2024-07-26 11:41:15 发布

我不是程序媛lisa

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量1.7k

点赞数 5

分类专栏： vue 文章标签： javascript 前端 vue.js typescript

本文链接：https://blog.csdn.net/fandan1107/article/details/139258816

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

component是vue内置组件，主要作用是动态渲染组件。本文主要介绍vue内置动态组件component的使用。

一、动态组件的概念

多个组件通过component标签挂载在同一个组件中，通过触发动作进行动态切换，常搭配<keep-alive></keep-alive>使用。

二、使用场景

多用于以下几个场景：

1、tab栏的切换

管理系统中切换不同的菜单，展示tab，切换tab可以渲染不同组件，一般搭配<keep-alive></keep-alive>使用。

2、条件性地渲染组件

根据某个条件决定渲染哪个组件。通过在<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" />

3、动态组件传值

动态组件的传值遵循基本组件传值规则，除了支持v-bind传值以外，还支持ref引用传值；使用引用传值需要注意的是，需要确定组件之后，再使用ref属性进行传值，否则将会无法获取应用组件的属性。使用v-bind传值代码如下所示：

<template>
    <div>
        <component :is="item.component" :data="reportData" :exam-data="exampData"/>
    </div>
</template>
<script lang="ts" setup>
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">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive>
        <component
          :is="item.component"
          class="tab"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>