如何在Vue的<script setup>语法中定义name与components？

一、组件components的注册 #

在<script setup>语法里，完全不需要手动在components选项中注册组件——只要你通过import导入了组件，就可以直接在模板里使用。比如你代码里的HelloWorld，已经完成导入，所以模板里的<HelloWorld>可以正常渲染，你写的components: { HelloWorld }属于多余代码，直接删掉就行。

二、组件name的定义 #

<script setup>本身没有直接的语法来定义组件name，有两种实用方式：

方式1：新增普通<script>标签（兼容所有Vue3版本） #

在组件里添加一个不带setup属性的<script>标签，专门用来导出name：

<script>
export default {
  name: 'App'
}
</script>

方式2：使用defineOptions（Vue3.3及以上版本支持） #

如果你的Vue版本是3.3或更高，可以直接在<script setup>里用defineOptions定义name，无需额外的script标签：

<script setup>
// 导入后直接调用defineOptions
defineOptions({
  name: 'App'
})
</script>

三、修正后的完整App.vue代码 #

以下是两种方式对应的修正代码：

方式1（兼容所有Vue3版本）

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <span>greetingMessage:{{ greetingMessage }}</span>
</template>

<script>
export default {
  name: 'App'
}
</script>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { defineProps } from 'vue'

const props = defineProps(['foo','greetingMessage'])

console.log("props:",props)
console.log("props.foo:",props.foo)
console.log("props.greetingMessage:",props.greetingMessage)
</script>

方式2（Vue3.3+可用）

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <span>greetingMessage:{{ greetingMessage }}</span>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { defineProps } from 'vue'

defineOptions({
  name: 'App'
})

const props = defineProps(['foo','greetingMessage'])

console.log("props:",props)
console.log("props.foo:",props.foo)
console.log("props.greetingMessage:",props.greetingMessage)
</script>

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