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

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

    译文来着: http://wiki.apache.org/nutch/Crawl 介绍(Introduction) 注意:脚本中没有直接使用Nutch的爬去命令(bin/nutch crawl或者是& ...

  2. session_start() [function.session-start]:

    我在学习PHP的,当我尝试做在session_start() - 获取有关错误信息不能发送会话cookie. 我看到在这个问题上前面的问题,可是,仍然不能确定我的错误. 假设是错误家伙? <? ...

  3. HTML5的未来

    2014年10月29日,万维网联盟(W3C)宣布,经过差点儿8年的艰辛努力.该标准规范终于终于制定完毕.之所以是8年,由于在1999年HTML4的规范制定以后,W3C对于HTML的发展.貌似就不再那么 ...

  4. 【cl】Red Hat Linux虚拟机安装Vmware Tools

    1.选择虚拟机,选中导航栏虚拟机>VMware Tool安装 选择右键>extract to 选择/home,新建了自己的文件夹,然后点击extract 一直enter,一直到 然后reb ...

  5. POJ 1679 The Unique MST(推断最小生成树_Kruskal)

    Description Given a connected undirected graph, tell if its minimum spanning tree is unique.  Defini ...

  6. python基于selenium+cv2+numpy实现登录某大型电商系统

    首先贴上我的安装包 一.selenium安装 I.打开pycharm,点击Settings,找到Project Interpreter,点击右边的下拉菜单下的show All...选项 II.点击sh ...

  7. JavaScript:对象

    ylbtech-JavaScript:对象 1. JavaScript Array 对象返回顶部 1. JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值 ...

  8. quartz + spring 启动项目时,报错The web application [] appears to have started a thread named.........

    只是想记录自己的错误信息,下次再出现就知道怎么操作,不用再查找资料 解决办法: package com.wqq.quartz_test.schedule; import javax.servlet.S ...

  9. MongoDB索引05-30学习笔记

    MongoDB 索引 索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录. 这种扫描全集合的查询效率是非常低的,特别在处理大 ...

  10. BZOJ 4547 矩阵快速幂

    思路: 肯定每回只加最大值和次大值 如果 一开始的最大值>0且次大值<0 那就一直加 加到次大值>0 搞一个矩阵 推斐波那契数列 求和 就好- //By SiriusRen #inc ...