vue 多个组件动态加载（动态组件的使用）

需求：多个游戏卡片根据接口返的数据列表去加载

初步想法：直接使用v-if指令进行条件渲染

<div>
   <CarefulClerkAnswer v-if="item.gameName=='careful_clerk'" @viewImg="viewImg" :question="item"></CarefulClerkAnswer>
   <LittleWaiterAnswer v-if="item.gameName=='little_waiter'" @viewImg="viewImg" :question="item"></LittleWaiterAnswer>
   <FlashCardsAnswer v-if="item.gameName=='flash_cards'" @viewImg="viewImg" :question="item"></FlashCardsAnswer>
   <DaturaTrainingAnswer v-if="item.gameName=='datura_training'" @viewImg="viewImg" :question="item"></DaturaTrainingAnswer>
   <OrderingExpertAnswer v-if="item.gameName=='ordering_expert'" @viewImg="viewImg" :question="item"></OrderingExpertAnswer>
   <SuperBuyerAnswer v-if="item.gameName=='super_buyer'" @viewImg="viewImg" :question="item"></SuperBuyerAnswer>
   <AirTheClothesAnswer v-if="item.gameName=='drying_clothes'" @viewImg="viewImg" :question="item"></AirTheClothesAnswer>
   <FoodStorageTalentAnswer v-if="item.gameName=='talent_of_food_storage'" @viewImg="viewImg" :question="item"></FoodStorageTalentAnswer>
   <ClothingClassificationAnswer v-if="item.gameName=='classify_clothes'" @viewImg="viewImg" :question="item"></ClothingClassificationAnswer>
   <WashClothesAnswer v-if="item.gameName=='wash_clothes'" @viewImg="viewImg" :question="item"></WashClothesAnswer>
   <FindSizeAnswer v-if="item.gameName=='find_size'" @viewImg="viewImg" :question="item"></FindSizeAnswer>
   <DetergentLabelAnswer v-if="item.gameName=='laundry_detergent_label'" @viewImg="viewImg" :question="item"></DetergentLabelAnswer>
 </div>

但是游戏卡片类型还会继续增加，如果以后增加到上百个。。。个人觉得这种情况直接在DOM上使用v-if判断不太好。

优化：在一个多标签的界面使用 is attribute 来切换不同的组件达到动态渲染组件的目的。动态组件 & 异步组件 — Vue.js

先定义组件列表

组件传值方式跟普通组件一样，不多说了。代码简洁很多有没有，嘿嘿 

<div>
   <component :is="compentList[item.gameName]" @viewImg="viewImg" :question="item"</component>
</div>