vue3组件命名方法-不用上双标签了

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

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

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

name 属性的用途 #

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

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

声明 name 属性 #

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

有以下几种方式来声明 name 属性：

defineOptions #

vue 官方在 vue@3.3 及以上版本中推出了 defineOptions API，允许你直接在 <script setup> 中声明组件选项，无需额外的<script>标签或是第三方插件。

<script setup>
  defineOptions({ 
    name: 'MyComponent',
    inheritAttrs: false
  })
</script>