vue动态组件-根据数据展示特定组件
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动态组件-根据数据展示特定组件的更多相关文章
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- vue 父组件传递数据给子组件
父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- vue中父组件传数据给子组件
父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- vue $emit $on 从子组件传递数据给父组件
原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...
- 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法
1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData" 2. 子组件在props中,接收这个方法并声明 props: { onUp ...
随机推荐
- Hibernate错误——No row with the given identifier exists
错误 是用的是Hibernate自动建立的数据表,在进行数据库操作时,出现错误No row with the given identifier exists 解决 关系数据库一致性遭到了破坏,找到相关 ...
- jmeter响应代码为乱码
1.在请求的前面添加BeanShell PostProcessor 输入prev.setDataEncoding("UTF-8"); 2.当响应数据或响应页面没有设置编码时,jme ...
- python 列表长度
- 走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相
背景 闲鱼客户端的flutter页面已经服务上亿级用户,这个时候Flutter页面的用户体验尤其重要,完善Flutter性能稳定性监控体系,可以及早发现线上性能问题,也可以作为用户体验提升的衡量标准. ...
- vue1——vue引入方法,npm本地安装
博客地址 :https://www.cnblogs.com/sandraryan/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...
- js写出你的名字的拼音,判断哪个字母出现的最多
function fn(str) { var obj = {}; for (var i = 0; i < str.length; i++) { if (!obj[str.charAt(i)]) ...
- GPUtil是一个Python模块,使用nvidia-smi从NVIDA GPU获取GPU状态
GPUtil是一个Python模块,使用nvidia-smi从NVIDA GPU获取GPU状态 一个Python模块,用于在Python中使用nvidia-smi以编程方式从NVIDA GPU获取GP ...
- 接管SpringBoot对Activiti的数据源自动配置
SpringBoot的自动配置真的让人又爱又恨,但还是爱更多一点. SpringBoot想要帮我们自动配置好一切,但是有时候配置的却并不是我们需要的,甚至有时候会默默的坑我们. 我的项目是一个多数据源 ...
- 实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第三次脱发——Scurm学(ctrl)习(C)心得
Scrum 学习心得: 首先,敏捷并不是一门具体的技术,而是一种理念或者说是一种思想.它可以指导我们更加高效的开发. 其次,敏捷开发都具有以下共同的特征: 迭代式开发 增量交付 开发团队和用户反馈推动 ...