如何在`<script setup>`中定义`name`和`inheritAttrs`？

Question

选项 API：

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'CustomName', // 
    inheritAttrs: false, // 
    setup() {
      return {}
    },
  })
</script>

如何做到这一点<script setup>，是否有等价于name和inheritAttrs喜欢defineProps和defineEmits？

<script setup>
  //  how to define them here?
</script>

Answer 1

使用 Vue ^3.3，您现在可以defineOptions()直接使用：

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

该<script setup>语法提供了表达大多数现有选项 API 选项的等效功能的能力，但少数选项除外：

• name
• inheritAttrs
• 插件或库所需的自定义选项

如果您需要声明这些选项，有两种方法：

1. 如果使用 Vue 宏，您可以使用defineOptions()，这可能是最简洁的方法：

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

2. 如果您不想依赖外部库，可以使用单独的普通<script>块export default：

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
  }
</script>

<script setup>
  // script setup logic
</script>

编译输出：

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
    setup() {
      // script setup logic
    },
  }
</script>