快捷導(dǎo)航

vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件圖文教程

更新時(shí)間：2024年07月15日 10:47:37 作者：volodyan

import.meta.glob是Vite提供的一個(gè)特殊功能,它允許你在模塊范圍內(nèi)動(dòng)態(tài)地導(dǎo)入多個(gè)模塊,這篇文章主要給大家介紹了關(guān)于vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件的相關(guān)資料,需要的朋友可以參考下

前言

import.meta.glob 是 Vite 提供的一個(gè)特殊功能，它允許你在模塊范圍內(nèi)動(dòng)態(tài)地導(dǎo)入多個(gè)模塊。這在處理大量的文件，如組件、頁(yè)面或其他模塊時(shí)特別有用，特別是當(dāng)你需要根據(jù)某些條件或模式來(lái)動(dòng)態(tài)加載它們時(shí)。

創(chuàng)建需要?jiǎng)討B(tài)導(dǎo)入的組件目錄

假設(shè)你有一個(gè)src/pages/DynamicComponents目錄，里面包含多個(gè) Vue 組件，你想根據(jù)某些條件動(dòng)態(tài)地導(dǎo)入這些組件。

首先，確保你的目錄結(jié)構(gòu)是這樣的：

src/pages/index.vue文件

<template>
    <div class="DynamicComponentsOutbox">
        <h1>DynamicComponents</h1>
    </div>
    <div>
        <component v-for="(component, name) in dynamicComponents" :key="name" :is="component" />
    </div>
</template>

<script setup>
import { onMounted, reactive,markRaw } from 'vue'
const dynamicComponents = reactive({})
onMounted(async () => {
    const modules = import.meta.glob('./DynamicComponents/*.vue');

    for (const path in modules) {
        const module = await modules[path]();
        const componentName = path.replace(/^\.\/components\/(.*)\.vue$/, '$1');
        console.log(`componentName`,componentName );
      dynamicComponents[componentName] = markRaw(module.default)
     
    }
    console.log(`dynamicComponents`,dynamicComponents);
})
</script>

<style lang="scss" scoped></style>

src/pages/DynamicComponents/ComponentA.vue文件

<template>
    <div class="">
        <h1>ComponentA</h1>
    </div>
</template>
  
<script setup>

</script>
  
<style lang="scss" scoped></style>

src/pages/DynamicComponents/ComponentB.vue文件

<template>
    <div class="">
        <h1>ComponentB</h1>
    </div>
  </template>
  
  <script setup>
  
  </script>
  
  <style lang="scss" scoped>
  
  </style>

App.vue文件

<template>
  <main>
    <HelloWorld msg="You did it!" />
    <component :is='DynamicComponents'></component>
  </main>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import DynamicComponents from '@/pages/index.vue'
</script>
<style scoped></style>

index.vue:6 
 [Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  
{__hmrId: 'ed2b2297', __file: 'C:/Users/63002/Desktop/codefile/vue3-vite2/src/pages/DynamicComponents/ComponentA.vue', render: ?}
 
  at <Index> 
  at <App>

剛開(kāi)始這樣寫(xiě)

 dynamicComponents[componentName] =module.default

這里報(bào)了一個(gè)警告：提示你去給組件使用markRaw or shallowRef包起來(lái)就好了，我直接使用了markRaw來(lái)包起組件，就解決這個(gè)警告了。

改為：

import { onMounted, reactive,markRaw } from 'vue'

dynamicComponents[componentName] = markRaw(module.default)

<template>
    <div class="DynamicComponentsOutbox">
        <h1>DynamicComponents</h1>
    </div>
    <div>
        <component v-for="(component, name) in dynamicComponents" :key="name" :is="component" />
    </div>
</template>

<script setup>
import { onMounted, reactive,markRaw } from 'vue'
const dynamicComponents = reactive({})
onMounted(async () => {
    const modules = import.meta.glob('./DynamicComponents/*.vue');
    for (const path in modules) {
        const module = await modules[path]();
        const componentName = path.replace(/^\.\/components\/(.*)\.vue$/, '$1');
        console.log(`componentName`,componentName );
      dynamicComponents[componentName] = markRaw(module.default)
     
    }
    console.log(`dynamicComponents`,dynamicComponents);
})
</script>

<style lang="scss" scoped></style>

在上面的代碼中，我們首先在onMounted鉤子中使用 import.meta.glob 獲取 components 目錄下所有 .vue 文件的動(dòng)態(tài)導(dǎo)入。然后，我們遍歷這些模塊，加載它們，并將它們存儲(chǔ)在 dynamicComponents 對(duì)象中，其中鍵是組件的名稱（從文件路徑中提?。凳墙M件的默認(rèn)導(dǎo)出。

最后，在模板中，我們使用 v-for 指令遍歷 dynamicComponents 對(duì)象，并使用 Vue 的動(dòng)態(tài)組件功能 (<component :is="...">) 來(lái)渲染每個(gè)組件。

注意：由于 import.meta.glob 是在構(gòu)建時(shí)解析的，因此它不會(huì)為動(dòng)態(tài)路徑或運(yùn)行時(shí)確定的路徑工作。它主要用于靜態(tài)路徑模式。

總結(jié)

到此這篇關(guān)于vite5+vue3+ import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件的文章就介紹到這了,更多相關(guān)import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: