如何为Vue组件使用自定义名称？为何自定义名称无法生效？

在Vue的<script setup>语法中，组件在模板中可使用的标签名由导入时的变量名决定，而非组件选项里的name属性。这个name属性主要用于Vue DevTools标识组件、递归组件调用等场景，不影响模板中的标签调用规则。

你导入的变量名是MyCustomName，所以默认只能用<MyCustomName>或<my-custom-name>（Vue自动转换驼峰为短横线）调用组件；而你想用的<a-custom-name>没有对应的已注册组件变量，所以触发解析失败警告。

以下几种方式都能实现需求：

1. 导入时直接重命名（最简便） #

修改页面中的导入语句，将变量名改为与目标标签名对应的驼峰形式：

<script setup>
// 直接导入为aCustomName，Vue会自动映射为<a-custom-name>标签
import aCustomName from '@/components/MyCustomName.vue'
</script>

之后模板里的<a-custom-name>就能正常渲染组件了。

2. 手动注册组件别名 #

如果不想修改导入的变量名，可以在页面的<script setup>中手动创建别名变量：

<script setup>
import MyCustomName from '@/components/MyCustomName.vue'

// 创建别名，Vue会将aCustomName识别为组件，对应<a-custom-name>标签
const aCustomName = MyCustomName
</script>

3. 全局注册组件（适用于多页面复用的场景） #

如果这个组件需要在多个页面使用，可以在Vue应用初始化时全局注册它：

// main.js/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import MyCustomName from '@/components/MyCustomName.vue'

const app = createApp(App)
// 全局注册为'a-custom-name'，所有页面无需导入即可直接使用<a-custom-name>
app.component('a-custom-name', MyCustomName)

app.mount('#app')

之后在任意页面的模板里直接写<a-custom-name>即可，无需再导入组件。

4. 使用defineOptions（Vue 3.3+版本支持） #

如果希望组件自身定义模板中可使用的标签名，可以在组件的<script setup>中添加defineOptions：

<!-- MyCustomName.vue -->
<script setup>
defineOptions({
  name: 'a-custom-name'
})
</script>

但注意，这只是修改了组件的name标识，仍需要在使用页面导入时将变量名对应为aCustomName，或者全局注册，才能在模板中用<a-custom-name>调用。

内容的提问来源于stack exchange，提问作者Eric G