Vue3动态组件:is属性将驼峰组件名转为小写致加载失败

核心原因 #

当你把字符串形式的组件名（比如"LinkToInstagram"）传给:is时，Vue会自动将其解析为全小写的原生HTML标签（如<linktoinstagram>），而非你注册的自定义组件，这就是加载失败的根本原因。硬编码能正常工作，是因为直接传入了组件的引用，而非字符串名称。

解决步骤 #

1. 将组件引用存入映射对象
   把所有社交平台组件的引用整理到一个对象中，和平台标识一一对应：

   import LinkToInstagram from './LinkToInstagram.vue'
   import LinkToTwitter from './LinkToTwitter.vue'
   import LinkToFacebook from './LinkToFacebook.vue'
   
   export default {
     components: {
       LinkToInstagram,
       LinkToTwitter,
       LinkToFacebook
     },
     data() {
       return {
         socialComponents: {
           instagram: LinkToInstagram,
           twitter: LinkToTwitter,
           facebook: LinkToFacebook
         },
         selectedPlatform: 'instagram' // 用户选择的目标平台
       }
     }
   }
   

2. 绑定组件引用而非字符串
   在模板里直接从映射对象中获取对应组件的引用：

   <component :is="socialComponents[selectedPlatform]" />
   

额外提示 #

• 若组件是全局注册的，也可通过this.$options.components[组件名]获取引用，但显式映射的方式可读性和可维护性更强。
• 不要试图通过字符串转驼峰来适配组件名，Vue对动态组件的字符串参数会自动转小写，这是框架的默认行为。

内容的提问来源于stack exchange，提问作者St. Jan