Vue组件component标签的使用
Posted yjiangling
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue组件component标签的使用相关的知识,希望对你有一定的参考价值。
内置组件component的用法
<component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件
先看一下vue.js官网的用法:
也就是说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项目)
以上是关于Vue组件component标签的使用的主要内容,如果未能解决你的问题,请参考以下文章