第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何異步導入所有Vue3組件？

如何異步導入所有Vue3組件？

慕田峪7331174 2023-08-24 17:29:45
我正在努力讓組件發(fā)揮作用。我想在數(shù)組中包含組件名稱，然后將組件作為異步導入，然后以某種方式將變量放入 app.component 中。我已經(jīng)在這里嘗試了大約 6 個小時，但我無法弄清楚。我不想每個組件都有 50x import和 50x app.component并且它不想為我工作我可能錯過了一些明顯的東西。不幸的是，我不太擅長 JS。main.jsimport { createApp, defineAsyncComponent } from "vue";import App from "./App.vue";import router from "./router";var subComponents = new Array([  "test",   "test2"]);  subComponents.forEach(subComponent => {  subComponent = defineAsyncComponent(() =>    import(`@/components/sub/${subComponent}.vue`)         )});const app = createApp(App);app.use(router);app.component(subComponent, subComponents);app.mount("#app");它報告這些問題無法解析組件：測試無法解析組件：test2
查看完整描述

1 回答

?
一只甜甜圈

TA貢獻1836條經(jīng)驗 獲得超5個贊

我認為您需要的是在循環(huán)內(nèi)單獨注冊每個組件，如下所示：


子組件.js：


const subComponents = ['test', 'test2'];


export { subComponents }

main.js：


import { createApp, defineAsyncComponent } from 'vue';

import App from './App.vue';

import router from './router';

import { subComponents } from './subComponents';


const app = createApp(App);


subComponents.forEach(subComponent => {

    const component = defineAsyncComponent(() => import(`@/components/sub/${subComponent}.vue`));


    app.component(subComponent, component);

});


app.use(router);

app.mount('#app');

目前，您將一個不存在的subComponent變量作為第一個參數(shù)傳遞給單個實例，app.component并將數(shù)組作為第二個參數(shù)。


app.component應用于單個組件，第一個參數(shù)是組件的名稱，第二個參數(shù)是組件本身。


因此，如果您循環(huán)遍歷名稱數(shù)組并使用該名稱導入每個組件，然后使用該名稱和導入的組件注冊一個組件，它們將在您的整個應用程序中可用。


查看完整回答
反對 回復 2023-08-24
  • 1 回答
  • 0 關(guān)注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號