vue 循环加载动态组件以及传值
今天遇到一个需求,某个页面是个动态页面,由多个子组件构成。
之前我们的做法是将N个需要的组件import进主页面,然后引用一下即可。但是现在遇到的问题是, 这个动态页面存在多个业务,有的业务需要某几个组件,有的不需要,不同的业务需要的子组件是不同的。也就是说,如果我把所有需要的子组件全部import进去,就会存在一些用不上的情况,那么这个动态页面就会变成一个大而全的臃肿页面,这个当然是我们不期望看到的。
于是,我就在想是否可以根据我页面上传递的参数去循环出我需要的组件?
首先说下,需求是这个页面是根据某个code,得出一个组件集合,根据这个集合,加载出所需组件。完成页面的可配置化,动态加载。
网上一搜,还真有,综合之下给出如下方案:
首先我有一个app.vue,是我的的主页面,另外还有三个子组件a、b、c,app.vue和a.vue(b,c同理)里代码如图:
首先在页面放置component标签,里面配套v-for标签用于循环组件。
然后我在components方法里定义了我需要导入的组件,这时候只是导入,并没有在页面注册。
最后定义集合allComponents,这个集合是当前页面需要加载的组件集合,在实际项目中,这个集合是我根据业务code得来的,这里只是演示所以把集合写死了,实际上集合可能是N个元素,那么for的时候就会for出N个组件,就实现了组件的动态加载。
组件加载出来以后就涉及到传值了,和正常情况一样,给component标签加上自定义属性,如图,我加的是data属性,值等于我自定义的test变量,实际项目中这个换成自己的业务变量即可。
由于是component标签配上for循环加载的组件,那么在组件传值的时候,其实是共用一套的,就是传给a,b,c的参数是一样的,实际上a,b,c组件需要的参数各不相同,不过这也不影响,我们在子组件进行接收的时候,针对各自需要的参数进行接收就好了。
以上,就是整个动态组件,进行循环加载,以及组件传值的实例。
- Vue组件分割 动态加载组件
- vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案
- Vue 使用Props属性实现父子组件的动态传值
- Vue加载组件、动态加载组件的几种方式
- 权限管理模块中动态加载Vue组件
- 浅谈vue 动态加载、注册组件
- vue 动态加载tab选项卡组件
- vue父组件向子组件动态传值的两种方法
- vue+echarts 动态绘制图表以及异步加载数据
- 权限管理模块中动态加载Vue组件
- vue基础父子组件输入动态传值
- vue 组件动态 循环
- vue组件(全局,局部,动态加载组件)
- vue自定义插件(全局组件),以及向插件传值
- Vue动态加载异步组件的方法
- VUE提取公共css踩小坑 之 动态加载组件
- vue组件(全局,局部,动态加载组件)
- [Vue] 动态组件以及v-once的使用
- vue基础语法以及父子组件如何相互传值
- 动态加载权限管理模块中的Vue组件