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. shell学习(15)- eval及shell No such file or directory解决办法

    eval可以读取一连串的参数,然后按照参数特性来执行.参数数目不限,彼此之间用分号隔开. eval会对后面的命令进行两遍扫描,如果第一遍扫描后,命令是个普通命令,则执行此命令:如果命令中含有变量的间接 ...

  2. 洛谷 2149 [SDOI2009]Elaxia的路线

    题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每天都要奔波于宿舍和实验室之间,他们 希望在节约时间的 ...

  3. LeetCode80 Remove Duplicates from Sorted Array II

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? (Mediu ...

  4. laravel 定时任务通过队列发送邮件

    https://www.jianshu.com/p/f6b94596098e 关于laravel发送邮件,请先参考我的另一片文章:laravel sendcloud发送邮件,再继续往下看. 1.用da ...

  5. hdu 1430 魔板 (BFS+预处理)

    Problem - 1430 跟八数码相似的一题搜索题.做法可以是双向BFS或者预处理从"12345678"开始可以到达的所有状态,然后等价转换过去直接回溯路径即可. 代码如下: ...

  6. oracle 优化GROUP BY

    提高GROUP BY 语句的效率, 可以通过将不需要的记录在GROUP BY 之前过滤掉.下面两个查询返回相同结果但第二个明显就快了许多. 低效: SELECT JOB , AVG(SAL) FROM ...

  7. pytorch JIT浅解析

    概要  Torch Script中的核心数据结构是ScriptModule. 它是Torch的nn.Module的类似物,代表整个模型作为子模块树. 与普通模块一样,ScriptModule中的每个单 ...

  8. 原生_H5交互插件(适用于与V2.1)

    这是js代码 /* * 适合版本为 2.1.0 * 前提是url上加 from=app */ var Native = {}; var ua = navigator.userAgent; var oU ...

  9. mybatis 一对多查询 集合创建空对象的问题

    在做 mybatis 一对多查询的时候, resultMap 里面用到了集合标签 collection ,后来发现 当该条数据没有子集的时候, collection 会自动创建一个属性都是null的对 ...

  10. Python--day30--tcp协议(建立链接三次握手,断掉链接四次挥手)和UDP协议

    TCP协议: tcp是可靠的,面向连接的.建立全双工通信. 建立链接的三次握手 链接一旦建立一定是全双工工通信,必然是双方通信. UDP协议: TCP协议和UDP协议的对比: QQ使用的是UDP,因为 ...