Vue3 <script setup> 语法中如何定义组件的name属性？

在 <script setup> 语法中定义组件名称共有三种常用方案，可根据项目版本和场景选择：

• 方案1：使用 Vue 3.3+ 内置的 defineOptions 宏（推荐）
  直接在 <script setup> 作用域内调用宏即可完成配置，无需额外新增标签：

  <script setup>
  defineOptions({
    name: 'YourCustomComponent'
  })
  // 其余业务逻辑正常编写
  </script>
  

  该方案是目前的官方推荐写法，无需额外插件支持。
• 方案2：双 script 标签兼容写法
  如果你的项目 Vue 版本低于 3.3 无法使用 defineOptions，可以同时声明两个 script 标签，一个用 <script setup> 写业务逻辑，另一个用普通 script 声明组件名：

  <script>
  export default {
    name: 'YourCustomComponent'
  }
  </script>
  
  <script setup>
  // 业务逻辑
  </script>
  

• 方案3：隐式继承文件名
  如果你没有手动声明组件名，Vue 会默认将单文件组件的文件名作为组件名在 Devtools 中显示，比如文件名为 UserCard.vue，Devtools 中默认显示的组件名就是 UserCard，该方案优先级最低，会被手动声明的名称覆盖。

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