Vue3.2-动态加载异步组件

最新推荐文章于 2023-07-03 10:35:45 发布

SpringSir

最新推荐文章于 2023-07-03 10:35:45 发布

阅读量207

点赞数 1

分类专栏：编码技巧 web项目开发 Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46873254/article/details/129524575

版权

web项目开发同时被 3 个专栏收录

37 篇文章 2 订阅

订阅专栏

编码技巧

36 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

demo组件

<template>
  <div>
    {{ versionVar }}
    <component :is="currentCopmonent"></component>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, } from 'vue';

  const versionVar = ref('');
  const currentCopmonent = ref({});
  watch(
    () => versionVar.value,
    () => {
      currentCopmonent.value = defineAsyncComponent(() => import(`./test/${versionVar.value}.vue`));
    },
    { immediate: true },
  );
  setInterval(() => {
    versionVar.value === 'v1' ? (versionVar.value = 'v2') : (versionVar.value = 'v1');
  }, 1500);
</script>

2个子组件

<template>
  <h1> 我是v1组件内容 </h1>
</template>

<style lang="less" scoped>
  h1 {
    color: red;
  }





<template>
  <h1> 我是v2组件内容 </h1>
</template>
 
<style lang="less" scoped>
  h1 {
    color: #58bb4a;
  }
</style>
</style>