Vue中组件动态切换

南腔北调-pilmar

于 2024-06-05 14:43:45 发布

阅读量539

点赞数 4

分类专栏： # Web前端开发基础文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ningbw2000/article/details/139472042

版权

本文介绍了Vue中如何实现组件动态切换，特别是在Tab界面的应用。通过使用`<component>`元素结合`:is`属性，可以轻松在不同组件之间切换。当需要保留组件状态时，可以借助`<keep-alive>`组件使被切换的组件保持活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态组件——即组件动态切换

有些场景中，需要在两个组件间来回切换，比如Tab界面：
在这里插入图片描述
通过Vue中的 <component> 元素和特殊的 is属性相结合，同时，将被注册的组件名或导入的组件对象作为:is的值传入即可。也可以使用is属性基于模板对象来创建一般的HTML元素。

当使用 <component :is="..."> 来实现在多个组件间切换时，被切换掉的组件会被卸载，这样会导致组件切换前的状态丢失。为保持组件切换的历史状态，可通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

    <KeepAlive>
      <component :is="activeComponent" />
    </KeepAlive>

    // App.vue
    <script setup>
    import Home from './Home.vue'
    import Posts from './Posts.vue'
    import Archive from './Archive.vue'
    import {
      ref } from 'vue'
    
    const currentTab = ref('Home')
    
    const tabs = {