vue3 setup name

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义组件名称
defineExpose({
  name: 'MyComponent'
});

// 使用 ref 创建响应式变量
const message = ref('Hello Vue 3 Setup Syntax!');
</script>

<style scoped>
/* 样式代码 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个简单的 div，里面有一个 h1 标签用于显示 message 的值。

2. 脚本部分 (<script setup>):

   • 使用了 Vue 3 的 <script setup> 语法糖，简化了组合式 API 的使用。
   • 导入了 ref 函数，用于创建响应式变量 message。
   • 使用 defineExpose 来定义组件的名称为 MyComponent。需要注意的是，在 Vue 3 中，defineExpose 主要用于暴露组件内部属性给父组件使用，而定义组件名称通常使用 name 选项。这里为了符合你的要求，使用了 defineExpose 来模拟定义组件名称的行为。

3. 样式部分 (<style scoped>):

   • 包含了组件的局部样式，scoped 关键字确保这些样式只应用于当前组件。

如果你需要更准确地定义组件名称，可以参考以下方式：

<script>
export default {
  name: 'MyComponent',
  setup() {
    import { ref } from 'vue';
    const message = ref('Hello Vue 3 Setup Syntax!');
    return {
      message
    };
  }
}
</script>

这种方式更符合 Vue 3 的标准用法。