vue 如何动态切换组件,使用is进行切换
日常项目中需要动态去切换组件进行页面展示。
例如:登陆用户是“管理员”或者“普通用户”,需要根据登陆的用户角色切换页面展示的内容.则需要使用 :is 属性进行绑定切换
<template>
<div class="dashboard-container">
<component :is="currentRole"/>
</div>
</template> <script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor' export default {
name: 'Dashboard',
components: { adminDashboard, editorDashboard },
data() {
return {
currentRole: 'adminDashboard'
}
},
computed: {
...mapGetters([
'roles'
])
},
created() {
if (!this.roles.includes('admin')) {
this.currentRole = 'editorDashboard'
}
}
}
</script>
vue 如何动态切换组件,使用is进行切换的更多相关文章
- vue实现动态异步组件
https://segmentfault.com/a/1190000015080442 https://www.jianshu.com/p/40a364b5e964 <component :is ...
- Vue动态创建组件方法
组件写好之后有的时候需要动态创建组件.例如: 编辑文章页面,正文是一个富文本编辑器,富文本编辑器是一个第三方的组件,点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢. 富文本编辑器也 ...
- 第八十七篇:Vue动态切换组件的展示和隐藏
好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...
- Vue.js动态组件
动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...
- Vue.extend动态注册子组件
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...
- vue动态子组件的实现方式
让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...
- elementUI的动态tabs页的使用,vue的动态组件的操作
elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...
- 【Html】Vue动态插入组件
html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
随机推荐
- HDU 3432
水题,就是把一个矩形平分. 题意:一个wid*hei的矩形,过底边上的一点(dor,0)做m-1条射线,把这个矩形的面积平均分成m份,求这些射线和矩形的另外一个交点. 直接枚举,然而求三角形高底移动坐 ...
- SQL Server中如何设置对列的权限
一.方式一:使用视图 将需要限制用户只能看到特定的几个列.设置成一个视图,然后对这个视图进行权限控制 二.方式二:使用GRANT语句 1.授予相关列的查询权限(SELECT) 在数据库db1中,登录名 ...
- 自己定义控件三部曲之动画篇(七)——ObjectAnimator基本使用
前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来: 如今却常是忧郁. 一切都是瞬息,一切都将会过去: 而那过去了的,就会成为 ...
- linux下Oracle11g RAC搭建(七)
linux下Oracle11g RAC搭建(七) 六.安装Grid 启动GRID安装界面 方式一:redhat下调整分辨率 [root@node1 ~]# xhost + //授权 [ro ...
- RDLC报表钻取空白页问题
在改动报表查询条件时,钻取页突然空白了,百思不得其解,之前好好的,研究了一个下午和一个晚上.查资料等等,网上非常多资料都是设置报表的 ConsumeConteinerWhitespace = True ...
- tensorflow利用预训练模型进行目标检测(四):检测中的精度问题以及evaluation
一.tensorflow提供的evaluation Inference and evaluation on the Open Images dataset:https://github.com/ten ...
- 几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
- virtualbox 安装虚拟机(centos7) 并映射本地文件夹至虚拟机(增强工具)
一.安装环境 操作系统:windows10 virtualbox: 5.2.20 (在安装virtualbox 时可能需要 进入BIOS 设置虚拟化系统启动) centos7:http://mirro ...
- 从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/fuchaosz/article/details/52473660 1 前言 经过一周的奋战,终于从谷 ...
- BZOJ 4547 矩阵快速幂
思路: 肯定每回只加最大值和次大值 如果 一开始的最大值>0且次大值<0 那就一直加 加到次大值>0 搞一个矩阵 推斐波那契数列 求和 就好- //By SiriusRen #inc ...