vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由

假设有以下三个组件:

  com1、com2、com3

有一个外层路/coms中代码如下

  

 <template>
<div class="container">
<component :is="activeItem"/>
<button @click="changeActiveItem">切换</button>
</div>
</template>
<script>
export default {
name:"coms",
data(){
return {
activeItem:'com1'
}
},
components:{
com1:()=>import('@/components/com-1.vue'),
com2:()=>import('@/components/com-2.vue'),
com3:()=>import('@/components/com-3.vue'),
},
methods:{
changeActiveItem(){
this.activeItem = this.activeItem === 'com1' ?
'com2' : this.activeItem === 'com2' ?
'com3' : 'com1'
}
}
}
</script>

那么这就实现了一个简单的动态路由了。

但是我现在有另外一种场景,那就是需要在某个页面展示不确定数量的组件,具体展示什么组件由权限判断后后端返回一个数组。

即我要同时显示三个组件中的0-3个组件,很容易想到用v-if判断是否存在于数组中来动态显示,稍显麻烦且不提,如果我要根据后台数据改变顺序呢?

这种时候循环往往是有效的,用数组长度个component组件就可以了嘛。

 <template>
<div class="container">
<component :is="item" v-for="item in allComponents" :key="item" />
</div>
</template>
<script>
export default {
name:"coms",
data(){
return {
allComponents:['com1','com2']
}
},
components:{
com1:()=>import('@/components/com-1.vue'),
com2:()=>import('@/components/com-2.vue'),
com3:()=>import('@/components/com-3.vue'),
}
}
</script>

注:()=>import('@/components/com-1.vue')  为组件按需加载。当组件较多时这能显著提高性能。

vue动态组件-根据数据展示特定组件的更多相关文章

  1. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  2. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  3. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  4. vue 父组件传递数据给子组件

    父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...

  5. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  6. vue中父组件传数据给子组件

    父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...

  7. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  8. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  9. 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法

    1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData"   2. 子组件在props中,接收这个方法并声明 props: { onUp ...

随机推荐

  1. Hibernate错误——No row with the given identifier exists

    错误 是用的是Hibernate自动建立的数据表,在进行数据库操作时,出现错误No row with the given identifier exists 解决 关系数据库一致性遭到了破坏,找到相关 ...

  2. jmeter响应代码为乱码

    1.在请求的前面添加BeanShell PostProcessor 输入prev.setDataEncoding("UTF-8"); 2.当响应数据或响应页面没有设置编码时,jme ...

  3. python 列表长度

  4. 走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相

    背景 闲鱼客户端的flutter页面已经服务上亿级用户,这个时候Flutter页面的用户体验尤其重要,完善Flutter性能稳定性监控体系,可以及早发现线上性能问题,也可以作为用户体验提升的衡量标准. ...

  5. vue1——vue引入方法,npm本地安装

    博客地址 :https://www.cnblogs.com/sandraryan/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...

  6. js写出你的名字的拼音,判断哪个字母出现的最多

    function fn(str) { var obj = {}; for (var i = 0; i < str.length; i++) { if (!obj[str.charAt(i)]) ...

  7. GPUtil是一个Python模块,使用nvidia-smi从NVIDA GPU获取GPU状态

    GPUtil是一个Python模块,使用nvidia-smi从NVIDA GPU获取GPU状态 一个Python模块,用于在Python中使用nvidia-smi以编程方式从NVIDA GPU获取GP ...

  8. 接管SpringBoot对Activiti的数据源自动配置

    SpringBoot的自动配置真的让人又爱又恨,但还是爱更多一点. SpringBoot想要帮我们自动配置好一切,但是有时候配置的却并不是我们需要的,甚至有时候会默默的坑我们. 我的项目是一个多数据源 ...

  9. 实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 第三次脱发——Scurm学(ctrl)习(C)心得

    Scrum 学习心得: 首先,敏捷并不是一门具体的技术,而是一种理念或者说是一种思想.它可以指导我们更加高效的开发. 其次,敏捷开发都具有以下共同的特征: 迭代式开发 增量交付 开发团队和用户反馈推动 ...