vue动态组件与异步组件

最新推荐文章于 2025-02-27 01:21:03 发布

为谁攀登

最新推荐文章于 2025-02-27 01:21:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/shaixinxin/article/details/106537300

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue.js中动态组件的实现方法，包括组件切换及keepalive缓存的使用，确保组件状态持久化。同时，深入探讨了异步组件的加载方式，提高应用性能。

1、动态组件

1.1、组件切换

分别创建3个组件AComponent.vue、BComponent.vue、CComponent.vue，并且在A中引用B和C
在这里插入图片描述
代码分别如下：
AComponent.vue，这里是通过component 标签中的is属性来控制不同组件内容的显示

<template>
  <div>
    动态组件:
    <button @click="showB">显示B</button>
    <button @click="showC">显示C</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
    import BComponent from './child/BComponent'
    import CComponent from './child/CComponent'

    export default {
        name: "AComponent",
        data(){
            return{
                currentComponent:BComponent
            }
        },
        components:{
          BComponent,
          CComponent
        },
      methods:{
          showB(){
            this.currentComponent=BComponent
          },
          showC(){
            this.currentComponent=CComponent
          }
      }
    }
</script>
<style scoped>
</style>

BComponent.vue

<template>
  <div>
    组件B
  </div>
</template>

<script>
    export default {
        name: "BComponent"
    }
</script>
<style scoped>
</style>

CComponent.vue

<template>
  <div>
    组件C
  </div>
</template>

<script>
    export default {
        name: "CComponent"
    }
</script>
<style scoped>
</style>

在App.vue中引入<AComponent />，访问浏览器，可以看到，在组件A中通过按钮实现了组件B和组件C的动态切换
在这里插入图片描述

1.2、keep alive缓存

我们修改CComponent.vue的代码，增加一个赋值操作

<template>
  <div>
    组件C:{{ msg }}
    <button @click="changeMsg">更新</button>
  </div>
</template>

<script>
    export default {
        name: "CComponent",
        data(){
          return{
            msg:"C的原始数据"
          }
        },
      methods:{
        changeMsg(){
          this.msg = "C的更新数据"
        }
      }
    }
</script>
<style scoped>
</style>

当我们点击【更新】按钮后，组件C渲染的数据会变成C的更新数据，但是我们再次切换【显示B】和【显示C】按钮时，组件C渲染的数据会重新变成C的原始数据，原因是每次切换新标签的时候，Vue 都创建了一个新的 currentComponent实例。
那么如果我们希望第一次被创建的实例效果保存下来，则需要使用<keep-alive>元素将其动态组件包裹起来，进行缓存。
在这里插入图片描述
修改AComponent.vue中的如下代码即可

 	<keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>

2、异步组件

使用异步组件需要修改import方式，比如修改import CComponent from './child/CComponent'导入方式为如下，CComponent则变成异步渲染

const CComponent = () => import("./child/CComponent");