亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

如何使用VUE動態的對異步組件進行加載?

如何使用VUE動態的對異步組件進行加載?

萬千封印 2019-05-11 15:32:06
需求是首先通過一個異步的方式獲取一個組件名稱的列表,然后根據這個列表(字符串數組形式)加載這個列表上的組件,然后循環顯示在頁面上我先照著vue官網上的搞了一個,我現在可以將組件異步加載,但是我不知道該如何進行下去了constAsyncComponent=()=>({component:import(`../plugs/Link`)})exportdefault{name:'Menu',components:{},data(){return{plugs:[]}},created(){},computed:{Link:function(){returnAsyncComponent}}}接vv13的回答:上邊的例子是我現在寫的樣子,容易誤導人,我換一種需求的例子目前需求里示例中的Link1、Link2等組件不一定存在,全是從另一個接口中獲取的組件列表例如:exportdefault{name:'Menu',components:{//此處并非固定,所有組件均從后臺添加前臺無法在components中寫死},data(){plugs:[]//此為組件列表},created(){//此處獲取到列表fetch('plugs.php').then((data)=>data.json()).then((data)=>{//data可能是['Link1','Link2','components1','components2',...]所有組件均從后臺添加前臺無法在components中寫死,并且在此假設所有組件文件都由后臺上傳并存放在`../plugs/Link`目錄下this.plugs=data;})},computed:{}}
查看完整描述

2 回答

?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

已經解決了:
                            
查看完整回答
反對 回復 2019-05-11
?
Cats萌萌

TA貢獻1805條經驗 獲得超9個贊

Vue的異步組件實踐有兩種,第一種是路由懶加載將應用由路由層分為多個chunk,減小單個入口的打包體積。
還有一種就是在Tab頁、彈窗等不需要立即展示的都可以使用異步組件進行加載,就拿你的demo來講:
首先加載兩個動態組件Link1和Link2,通過data中的currentLink來指定動態組件的名稱,這樣就可以動態的加載組件。
                            
查看完整回答
反對 回復 2019-05-11
  • 2 回答
  • 0 關注
  • 679 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號