前言

• 项目中通过node对报告的不同节点权限进行了处理，前端根据返回的节点动态注册组件。下面记录下vue2和vue3注册组件的方式：

vue2选项式 API (Options API)

• index.vue文件

<template>
  <div v-if="Object.keys(components).length > 0">
    <div v-for="item in componentNames" :key="item">
      <component :is="item"></component>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
const componentNames = ['user', 'config', 'role']
export default {
  provide() {
    return {
      count: this.count
    }
  },
  data() {
    return {
      count: 0,
      componentNames: componentNames,
      components: {}
    }
  },
  mounted() {
    this.registerComponent(componentNames)
  },
  methods: {
    registerComponent(componentNames) {
      let reportcoms = {}
      componentNames.forEach((templateName) => {
        const com = require(`./components/${templateName}.vue`).default
        reportcoms[templateName] = com
        Vue.component(templateName, com)
      })
      this.components = reportcoms
    }
  }
}
</script>

• ./components/user.vue ./components/config.vue、./components/role.vue

<script>
export default {
  inject: ['count']
}
</script>

<template>
    <div>User-{{count}}</div>
</template>

vue3组合式 API (Composition API)

• index.vue文件

<script lang="ts">
import { reactive, toRefs, defineComponent, defineAsyncComponent, provide } from 'vue'

const componentNames = ['user', 'config', 'role']
let components: any = {};
componentNames.forEach((component) => { //component represents the component name
    components[component] = defineAsyncComponent(() => //import each component dynamically
        import(`./components/${component}.vue`)
    );
});

export default defineComponent({
    name: "dynamic",
    components,
    setup() {
        const state = reactive({
            count: 0
        })
        provide('count',()=>{
            return state.count
        })
        return {
            ...toRefs(state),
            componentNames
        };
    }
});
</script>

<template>
    <div v-for="item in componentNames" :key="item">
        <component 
            :is="item" 
            @addCount="(n: number) => { count += n }"
            @subCount="(n: number) => { count -= n }"
        >{{count}}</component>
    </div>
</template>

• ./components/user.vue ./components/config.vue、./components/role.vue

<script setup lang="ts">
const emits = defineEmits(['addCount', 'subCount'])
</script>

<template>
    <div>
        <el-button @click="() => { emits('addCount', 1) }">加1</el-button>  
        <el-button @click="() => { emits('subCount', 1) }">减1</el-button>  
        <slot></slot>
    </div>
</template>