标签:使用 动态绑定 com des boa turn put mamicode ted
也就是说component通过属性is的值可以渲染不同的组件。
看一下实际开发中的用法:
其中adminDashboard,editorDashboard是两个不同的组件 ,这是一个具有权限功能系统的部分代码,admin用户和editor用户看到的页面是两个页面(也就是两个组件,adminDashboard,editorDashboard)
1 <template> 2 <div class="dashboard-container"> 3 <component :is="currentRole" /> 4 </div> 5 </template> 6 7 <script> 8 import { mapGetters } from ‘vuex‘ 9 import adminDashboard from ‘./admin‘ 10 import editorDashboard from ‘./editor‘ 11 12 export default { 13 name: ‘Dashboard‘, 14 components: { adminDashboard, editorDashboard }, 15 data() { 16 return { 17 currentRole: ‘adminDashboard‘ 18 } 19 }, 20 computed: { 21 ...mapGetters([ 22 ‘roles‘ 23 ]) 24 }, 25 created() { 26 if (!this.roles.includes(‘admin‘)) { 27 this.currentRole = ‘editorDashboard‘ 28 } 29 } 30 } 31 </script>
(代码片段来源于vue-element-admin项目)
标签:使用 动态绑定 com des boa turn put mamicode ted
原文地址:https://www.cnblogs.com/yjiangling/p/12794933.html