为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用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 关注
  • 635 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信