日常项目中需要动态去切换组件进行页面展示。

例如:登陆用户是“管理员”或者“普通用户”,需要根据登陆的用户角色切换页面展示的内容.则需要使用 :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进行切换的更多相关文章

  1. vue实现动态异步组件

    https://segmentfault.com/a/1190000015080442 https://www.jianshu.com/p/40a364b5e964 <component :is ...

  2. Vue动态创建组件方法

    组件写好之后有的时候需要动态创建组件.例如: 编辑文章页面,正文是一个富文本编辑器,富文本编辑器是一个第三方的组件,点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢. 富文本编辑器也 ...

  3. 第八十七篇:Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  4. Vue.js动态组件

    动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...

  5. Vue.extend动态注册子组件

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...

  6. vue动态子组件的实现方式

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...

  7. elementUI的动态tabs页的使用,vue的动态组件的操作

    elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...

  8. 【Html】Vue动态插入组件

    html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...

  9. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

随机推荐

  1. 关于BeanShell报错提示Error invoking bsh method

    背景:因测试需要打算从外部引用.java和.class文件,奈何报错挥之不去:Error invoking bsh method: eval...... 各种百度取经之后,决定先抛弃引用,试试Bean ...

  2. Android后台服务拍照的解决方式

    一.背景介绍 近期在项目中遇到一个需求.实现一个后台拍照的功能. 一開始在网上寻找解决方式.也尝试了非常多种实现方式,都没有惬意的方案.只是确定了难点:即拍照要先预览,然后再调用拍照方法.问题也随之而 ...

  3. 学习vi和vim编辑器(1):vi文本编辑器

    UNIX系统中有非常多编辑器.能够分为两种类型:行编辑器和全屏编辑器.行编辑器每次仅仅能在屏幕中显示文件的一行,如ed和ex编辑器.全屏编辑器能够在屏幕上显示文件的一部分. vi(读为vee-eye) ...

  4. linux中udev简单的用法-->【转】

    本文转载自:http://blog.csdn.net/qq_29729577/article/details/50825134 udev是Linux提供的一种在用户态管理设备的一种机制,udev的详细 ...

  5. contest hunter5105 Cookies

    神题 先按贪婪值大到小排序,根据贪心的思想g[i]越大a[i]也越大(这个微扰可以证,给个提示,a>b且c<d 则 (a-b)(c-d)<0 则 ac+bd<ad+bc) DP ...

  6. 字符流、字节流、二进制及其在HTTP协议传输

    一.二进制.字节.字符流概念 字(Byte)节是长度单位.位(bit)也是长度单位.计算机通信和存储的时候都是以010101这样的二进制数据为基础的二进制数有两个特点:它由两个基本字符0,1组成,二进 ...

  7. k8s Gitlab CI/CD 之自动编译Docker镜像并推送到指定的Registry

    环境介绍: 说明 节点 ip 系统 Gitlab Server git.ds.com 10.0.1.179 CentOS 7.5.1804 Gitlab Runner   10.0.1.178 Cen ...

  8. linux系统在线搭建禅道

    1.先安装wget:yum -y install wget 2.下载安装禅道:[root@zhaowen ~]# wget http://dl.cnezsoft.com/zentao/9.0.1/Ze ...

  9. python print 显示不同的字体

    显示格式: print('\033[显示方式;字体颜色;背景色m.....\033[0m') ------------------------------- 显示方式 | 效果 ----------- ...

  10. FileCopy文件复制

    package cn.com.filecopy; import java.io.FileInputStream; import java.io.FileNotFoundException; impor ...