Vue組件component標簽的使用

內置組件component的用法

<component></component>標簽是Vue框架自定義的標簽，它的用途就是可以動態綁定我們的組件，根據數據的不同更換不同的組件

先看一下vue.js官網的用法：

 

 

 

也就是說component通過屬性is的值可以渲染不同的組件。

看一下實際開發中的用法：

其中adminDashboard，editorDashboard是兩個不同的組件 ，這是一個具有權限功能系統的部分代碼，admin用戶和editor用戶看到的頁面是兩個頁面（也就是兩個組件，adminDashboard，editorDashboard）

<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-element-admin項目)