Vue3 组件命名 #

Vue3 的组件，即 SFC，单文件组件。

组件的文件名推荐采用首字母大写驼峰或者字母小写连字符的方式，例如：MyComponent.vue、my-component.vue。

每个 Vue3 组件，都应当设置 name 属性，这也是我们本文的重点。

name 属性的用途 #

组件的名字有以下几种用途：

• 在组件自己的模板中递归引用自己时。
• 在 Vue 开发者工具中的组件树显示时。
• 在组件抛出的警告追踪栈信息中显示时。
• 使用 KeepAlive，通过该属性来匹配需要缓存的组件时。

声明 name 属性 #

而当我们在 vue3 项目中采用组合式 API <script setup> 的写法，需要显示的声明 name 属性。

有 2 种方式来声明 name 属性：

1. 额外的 script 标签。

我们可以在 <script setup> 标签外再定义一个 script 标签，用于声明 name 属性。

<script>
export default {
  name: 'MyComponent',
}
</script>

<script setup>
...
</script>

2. 借助 unplugin-vue-define-options

yarn install unplugin-vue-define-options -D

为了提供类型声明，还可以在 tsconfig.json 文件中配置。

如果项目使用了 3.2.34 及以上版本的 vue，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，即使是在配合 <KeepAlive> 使用时也无需再手动声明。

也就是你的组件文件名为 MyComponent.vue 或者是 my-component.vue 时，对应组件的 name 属性则是 MyComponent。