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>

vue 多个组件动态加载（动态组件的使用）相关推荐

vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
vue 父组件重新加载子组件
vue 父组件重新加载子组件通过给子组件添加key或者v-if 重新加载子组件: html: <button @click="update">更新</butt ...
import() 动态加载component组件失败
在写 vue+element 从后台获取数据写导航栏时,当我加载动态路由,import() 总是失败. 假设 path: "@/views/Home.vue",name: &qu ...
netcore实践：跨平台动态加载native组件
缘起netcore框架下实现基于zmq的应用.在.net framework时代,我们进行zmq开发由很多的选择,比较常用的有clrzmq4和NetMQ. 其中clrzmq是基于libzmq的Inte ...
C# 动态加载动态卸载
代码 using System; using System.Collections.Generic; using System.Text; using System.Threading; using ...
Vue（二十八）el-cascader 动态加载 - 省市区组件
1.后台接口为点击加载下一级 ,传省市区id <template><el-cascaderv-model="selectedOptions"placeholder ...
linux中动态加载动态库的方法
功能:打开一个动态链接库包含头文件: #include <dlfcn.h> 函数定义 : void * dlopen( const char * pathname , int mod ...
android fragment动态加载,动态添加Fragment
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 动态添加Fragment 在程序运行时, 根据具体情况来动态地添加Fragment到Activity中. 1 新建 An ...
angular使用动态组件后属性值_Angular动态加载组件
引言有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 ...

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

vue 多个组件动态加载（动态组件的使用）相关推荐

最新文章

热门文章