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

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

    Manacher算法,相当于求回文串. 关于Manacher,转 http://blog.sina.com.cn/s/blog_70811e1a01014esn.html 现在进入正题:首先,在字符串 ...

  2. 允许远程访问MySQL的设置

    允许远程访问MySQL的设置 学习了:http://www.cnblogs.com/hyzhou/archive/2011/12/06/2278236.html Windows版本有workbench ...

  3. win7/WIN8.1(x64) 下使用MSDE WIN10不行

    通过强制安装(使用管理员权限),手工启动服务的方式,能够在其win7 win81上安装并使用MSDE Microsoft SQL Server 2000 Service Pack 4 Desktop ...

  4. 【剑指Offer学习】【面试题34:丑数】

    题目:我们把仅仅包括因子2.3 和5 的数称作丑数(Ugly Number).求从小到大的顺序的第1500个丑数. 举例说明: 比如6.8 都是丑数.但14 不是.它包括因子7.习惯上我们把1 当做第 ...

  5. 解决MyEclipse开启后总是不停的在Update index

    近期MyEclipse开启之后总是不停的在 update index,非常是耗时间. 查找资料发现Update index...是Maven在不断更新, 解决的方法例如以下: Window --> ...

  6. C++开发人脸性别识别教程(19)——界面美化

    在这篇博文中将完毕<C++开发人脸性别识别>的收尾工作.主要内容分为两部分:加入视频暂定功能.界面规范化. 一 视频暂停功能 严格来说这个视频暂定功能算是视频人脸性别识别的一个遗留问题,本 ...

  7. EularProject 36:2进制和10进制回文数

    华电北风吹 天津大学认知计算与应用重点实验室 完毕日期:2015/7/29 Double-base palindromes Problem 36 The decimal number, 585 = 1 ...

  8. mysql 从库落后主库太多优化

    有时候为了避免master.info和中继日志崩溃,在容忍额外的fsync()带来的开销,推荐设置sync_master_info = 1sync_relay_log = 1sync_relay_lo ...

  9. Hdu-6243 2017CCPC-Final A.Dogs and Cages 数学

    题面 题意:问1~n的所有的排列组合中那些,所有数字 i 不在第 i 位的个数之和除以n的全排,即题目所说的期望,比如n=3 排列有123(0),132(2),231(3),213(2),312(3) ...

  10. ACM_支离破碎(递推dp)

    支离破碎 Time Limit: 4000/2000ms (Java/Others) Problem Description: 远古时期有一位魔王想向一座宫殿里的公主求婚.为了考验魔王的智力,太后给了 ...