vue3+vite 批量引入局部组件及使用

本文介绍: vue3+vite 批量引入局部组件及使用 vite 批量引入组件 vi t e 批量导入组件 vue3批量导入组件 vue3批量引入组件

目录 结构

批量 引入组件

例如：src/view s/oss/components/cu s tomComp on ents.ts

import { ref, defineAsyncComponent, markRaw } from 'vue';

const modules = import.meta.glob('./*.vue');

//这告诉 TypeScript，components.value 是一个键为字符串、值为 defineAsyncComponent 返回类型的对象。
const components = ref&lt;Record&lt;string, ReturnType<typeof defineAsyncComponent&gt;>>({});

 Object.entries(modules).forEach(([path, asyncCom]) => {
  const name = path.replace(/./(.*).vue/, '$1');
  components.value[name] = markRaw(defineAsyncComponent(asyncCom));
});

export default components

动态 使用组件

<template>
   <div v-for="(item, index) in componentList" :key="index">
      <component :is="customComponents[item]"></component>
   </div>
</template>

<script setup name="Oss" lang="ts">
   import customComponents from "./components/customComponents"

   const componentList: any = ref(['comp1' ,'comp-test' ,'Comp2' ,'CompTest2']);
</script>

或者单个使用

<template>
  <component :is="customComponents['comp1']"></component>
  <component :is="customComponents['Comp2']"></component>
  <component :is="customComponents['comp-test']"></component>
  <component :is="customComponents['CompTest2']"></component>
</template>

<script setup name="Oss" lang="ts">
   import customComponents from "./components/customComponents"
</script>

错误 使用

注意：封装的批量方法仅仅只作用于批量引入组件，并未将其注册为全局组件，所以不能将其直接以组件形式使用

<template>
   <comp1 />
   <Comp2 />
   <comp-test />
   <CompTest2 />
</template>

控制台会报出以下警告

index.vue:370 [Vue warn]: Fai led to resolve component: comp1
If this is a native custom element, make su re to exclude it from component resolution via compilerOptions.isCustomElement.