vue3异步组件加载

业务背景


业务上有个页面按流程节点展示不同模块,有可复用的,但顺序又不一致,不想用template if条件判断写多次,故提取各部分 作为子组件,按需加载


解决方式

template部分

<template>
  <h2>明细页</h2>
  <template v-for="component in components" :key="component">
    <component :is="component" />
  </template>
  <van-button @click="loadComp">load</van-button>
</template>

js部分

<script setup>
  import {
    defineAsyncComponent,
    shallowRef
  } from 'vue';
  
  // ✨ 以下是按需加载的组件,存在于./process文件夹下
  let dynamicArr = [
    'FaultConfirm',
    'DeviceInfo',
    'OrderInfo',
    'PartsInfo',
  ]
  let components = shallowRef([]); // 使用shallowRef ❗❗
  function loadComp() {
    let tempComponents = [];
    for (let i=0; i<dynamicArr.length; i++) { // for let循环,有序引入异步组件
      tempComponents.push(defineAsyncComponent(() => import(`./process/${dynamicArr[i]}.vue`))); // defineAsyncComponent ❗❗
    }
    components.value = tempComponents;
  }
</script>

你可能感兴趣的:(vue,javascript,vue.js)