使用is动态切换组件
Posted star-meteor
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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就是将vuex中的数据映射到组件的计算属性当中
...mapGetters([
‘roles‘
])
},
created() {
if (!this.roles.includes(‘admin‘)) {
this.currentRole = ‘editorDashboard‘
}
}
}
</script>
以上是关于使用is动态切换组件的主要内容，如果未能解决你的问题，请参考以下文章