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组件需要的参数各不相同，不过这也不影响，我们在子组件进行接收的时候，针对各自需要的参数进行接收就好了。

　　以上，就是整个动态组件，进行循环加载，以及组件传值的实例。