Vue组件内如何动态添加本地注册组件 无需全局注册

你原有代码不生效的原因是：Vue 组件的components选项是实例初始化阶段处理的静态配置，实例创建后直接修改this.components不会触发注册逻辑，要实现运行时动态本地注册，需使用实例暴露的可写配置对象。

修改方案（适配Vue2/Vue3 选项式API） #

直接操作实例的$options.components对象即可完成当前组件内的本地动态注册，不会全局污染其他组件，修改后代码如下：

export default {
  name: 'tabMaker',
  props: {
    components_: {
      type: Array,
      // 注意：数组/对象类型props的默认值必须用工厂函数返回，避免多实例共享数据
      default: () => [],
    },
  },
  components: {
    // 可留空，后续动态添加
  },
  data() {
    return {}
  },
  created() {
    this.components_.forEach((item) => {
      Object.entries(item).forEach(([key, value]) => {
        // 直接给$options.components赋值即可完成本地注册
        this.$options.components[key] = value
      })
    })
  },
}

额外注意点 #

• 动态注册逻辑要在组件渲染这些动态组件之前执行，如果是在mounted等更晚的生命周期执行注册，建议给动态组件加个判断，等注册完成后再渲染：

  <component :is="yourComponentName" v-if="isComponentsRegistered" />
  

Vue3 组合式API适配方案 #

如果使用<script setup>语法，不需要刻意注册组件，直接把组件存在变量里传给component标签的is属性即可：

<script setup>
import { ref } from 'vue'
const props = defineProps({
  components_: {
    type: Array,
    default: () => []
  }
})
const dynamicCompMap = ref({})
props.components_.forEach(item => {
  Object.entries(item).forEach(([key, value]) => {
    dynamicCompMap.value[key] = value
  })
})
</script>
<template>
  <div v-for="(comp, name) in dynamicCompMap" :key="name">
    <component :is="comp" />
  </div>
</template>

内容的提问来源于stack exchange，提问作者mohsen mehri