今天遇到一個需求，某個頁面是個動態頁面，由多個子組件構成。
之前我們的做法是將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組件需要的參數各不相同，不過這也不影響，我們在子組件進行接收的時候，針對各自需要的參數進行接收就好了。
以上，就是整個動態組件，進行循環加載，以及組件傳值的實例。