Vue3中通过<component :is>动态加载Vuetify组件渲染异常问题

Vue3 搭配 Vuetify3 使用自动导入方案（如unplugin-vue-components）时，静态写在模板中的<v-chip>标签会被插件静态扫描、自动引入注册；但<component :is>绑定字符串形式的组件名时，插件无法解析JS逻辑中的动态字符串值，不会自动引入对应的Vuetify组件。

此时Vue无法在当前组件的已注册组件列表中匹配到对应组件，会直接将标签作为普通原生HTML元素渲染，既不会初始化Vuetify组件的逻辑与样式，也不会抛出运行时报错，异常渲染效果如下：

传入VChip/vChip字符串无效逻辑相同：字符串形式的组件名仅能匹配当前组件已显式注册的组件，自动注入的Vuetify组件不在该匹配范围内。自定义组件可正常动态加载，是因为其要么做了全局注册，要么在当前组件components选项中显式引入注册过。

方案1：直接绑定组件实例（单组件场景） #

不要给:is传字符串，手动导入需要动态渲染的Vuetify组件，直接绑定导入的组件对象即可，代码示例：

<template>
   <v-chip>try</v-chip>
   <component :is="object.tag">{{ object.content }}</component>
</template>
<script>
// 手动导入目标Vuetify组件
import { VChip } from 'vuetify/components/VChip'
export default {
  name: 'component1',
  data: () => ({
    object: {
      tag: VChip, // 直接绑定组件对象，而非字符串
      content: 'hey'
    },
  }),
}
</script>

方案2：建立组件映射表（多组件动态切换场景） #

如果需要动态切换多种Vuetify组件，可以提前建立标签名到组件实例的映射表，使用时从映射表取对应组件即可，适合动态渲染配置化组件的场景：

<template>
   <v-chip>try</v-chip>
   <component :is="currentComp">{{ object.content }}</component>
</template>
<script>
// 统一导入所有需要动态渲染的Vuetify组件
import { VChip, VBtn, VCard } from 'vuetify/components'
// 建立标签名与组件实例的映射关系
const compMap = {
  'v-chip': VChip,
  'v-btn': VBtn,
  'v-card': VCard
}
export default {
  name: 'component1',
  data: () => ({
    object: {
      tag: 'v-chip',
      content: 'hey'
    },
  }),
  computed: {
    currentComp() {
      return compMap[this.object.tag]
    }
  }
}
</script>

方案3：全局注册动态用到的Vuetify组件 #

如果项目中大量场景需要动态渲染Vuetify组件，可以在Vuetify初始化配置中，将需要动态使用的组件做全局注册，之后即可直接传字符串标签名给:is使用。该方式会增加首屏包体积，非必要不推荐。

内容的提问来源于stack exchange，提问作者Girl Codes