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

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

    Ubuntu镜像文件下载 http://www.traffictool.net/vmware/ubuntu1404t.html 下载之后可以使用vmplayer启动: user/password ro ...

  2. 一种加快在苹果app store中上架的方法

    预计近期苹果app应用上架的比較多,审核比較慢,如今一个app从提交到上架短则7.8天.长则2.3个星期.我在实际上线应用时,总结了一个简单有用的小技巧,能够加快上架时间,近期使用这样的方法后.我们基 ...

  3. UI_UINavigationController

    创建 UINavigationController(导航控制器) 在AppDelegate.m中创建 // 创建一个普通控制器 RootViewController *rootVC = [[RootV ...

  4. leetcode第一刷_Minimum Depth of Binary Tree

    非常easy的题目.只是还是认为要说一下. 最小深度.非常快想到bfs,层序遍历嘛.本科的时候实在是没写过多少代码,一開始竟然想不到怎么保存一层的信息.后来想到能够压入一个特殊的对象,每次到达这个对象 ...

  5. 51-nod -1284 2 3 5 7的倍数

    1284 . 2 3 5 7的倍数 基准时间限制:1 秒 空间限制:65536 KB 分值: 5 给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 比如N = 10,仅仅有1不是2 3 ...

  6. Java 异步转同步 ListenableFuture in Guava

    ListenableFuture的说明 并发编程是一个难题,但是一个强大而简单的抽象可以显著的简化并发的编写.出于这样的考虑,Guava 定义了 ListenableFuture接口并继承了JDK c ...

  7. h5-9 canvas

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HIT Software Construction Lab6引发出来对锁的问题的探究

    前言 做完lab5开始做lab6了鸭,哈工大计算机学院的学生永不停歇.在做lab6的时候,我在想移动猴子是锁一整个ladder(ADT)还是只锁一个ladder的一个域Monkey数组呢?这两个好像差 ...

  9. 26. Remove Duplicates from Sorted Array[E]删除排序数组中的重复项

    题目 Given a sorted array nums, remove the duplicates in-place such that each element appear only once ...

  10. NOIP2013 D2T1 积木大赛

    [NOIP2013T4]积木大赛 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 noip2013day2 描述 春春幼儿园举办了一年一度的"积木大 ...