Vue v-bind:is可渲染哪些组件？如何限制动态组件可选范围

完全可以实现可控的范围约束，不用依赖全局注册的组件池做无限制匹配，以下是几个项目里常用的落地方式：

方案1：搭建白名单组件映射表（最推荐，隔离性最好） #

• 不要依赖全局注册的15+外部组件的全局可访问性，单独将动态组件实际允许渲染的少数几个组件，抽离到独立的本地映射字典中
• 参考实现代码：

// 从外部组件库中引入允许使用的目标组件
import AllowedCompA from '路径/AllowedCompA.vue'
import AllowedCompB from '路径/AllowedCompB.vue'
import AllowedCompC from '路径/AllowedCompC.vue'

// 建立白名单映射关系
const allowedCompMap = {
  compA: AllowedCompA,
  compB: AllowedCompB,
  compC: AllowedCompC
}

• 模板中修改动态组件的取值逻辑，直接从白名单字典中读取组件，不再走全局组件查找逻辑：

<template>
  <!-- 传入非白名单值时会拿到undefined，可根据需要添加兜底渲染逻辑避免报错 -->
  <component :is="allowedCompMap[config.name]" />
</template>

• 该方案的核心优势是彻底切断动态组件和全局组件池的关联，哪怕config.name传入了任意字符串，也只会匹配到字典里预先定义的几个组件，完全不会出现白名单外组件被意外渲染的问题；同时还能减少全局组件注册带来的冗余依赖，辅助打包工具完成未用组件的Tree-Shaking优化。

方案2：前置名称校验拦截 #

如果不想调整现有组件的引用方式，可以通过计算属性增加一层白名单校验逻辑，过滤非法的组件名称：

• 参考实现代码：

import { computed } from 'vue'
// 预先定义允许使用的组件名称清单
const allowedCompNames = ['compA', 'compB', 'compC']

// 计算属性返回经过合法性校验的安全组件名
const safeCompName = computed(() => {
  // 非法名称直接返回兜底占位组件名
  return allowedCompNames.includes(config.name) 
    ? config.name 
    : 'EmptyFallbackComp'
})

• 模板中使用校验后的安全名称：

<template>
  <component :is="safeCompName" />
</template>

• 注意该方案依然依赖全局注册的组件池，需要提前把兜底用的占位组件也完成注册，避免传入非法值时触发组件未找到的报错。

方案3：运行时挂载拦截（适合团队级规范管控） #

如果需要在团队项目中统一管控所有动态组件的渲染权限，可以封装自定义指令，在组件挂载前检查当前待渲染组件是否在全局维护的白名单内，不在白名单的话直接阻止组件挂载。这类方式适合中大型项目的统一规范落地，普通业务需求用前两种就足够。

内容的提问来源于stack exchange，提问作者U Rogel