vue 中动态添加组件方式
vue 中动态添加组件方式
在vue项目中 经常会有用户权限的问题,根据不同的用户角色进行不同的组件的显示,就是在需要哪一个组件的时候显示出来。vue中可以使用
<component :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.length < 1) {this.currentRole = "editorDashboard";}},
};
</script>