如何在 `<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

<script setup> 语法提供了表达大多数现有 Options API 选项的等效功能的能力，除了以下几个选项：

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

如果您需要声明这些选项，请使用单独的普通 <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>

Answer 2

有一个vite插件vite-plugin-vue-setup-extend可以解析set component name

配置

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

用法

<script lang="ts" setup name="CompName">
</script>

Answer 3

您可以在 setup

中使用 defineComponent

<script setup lang="ts">
defineComponent({
  inheritAttrs: false,
});
</script>