那我是<script setup>

Vue 3 <script setup> 语法使用说明
基本概念
<script setup> 是 Vue 3 提供的一种新的语法糖，用于简化单文件组件 (SFC) 的开发流程。它允许开发者直接在模板中访问定义的变量和函数，而不需要显式地通过 return 将它们暴露给模板[^1]。
自动注册子组件
当使用 <script setup> 时，父组件可以直接导入并使用子组件，而无需手动调用 components 属性进行注册。这种特性使得代码更加简洁明了[^3]。
Props 定义与传递
为了接收来自父组件的参数，在 <script setup> 中可以通过 defineProps 方法实现。这提供了一种类型安全的方式来声明组件所需的属性[^4]。
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
title: {
type: String,
required: true
}
});
</script>

<template>
<div>{{ title }}</div>
</template>
登录后复制
Emit 事件触发
除了处理输入数据外，有时也需要向外部发送消息或者通知状态变化。此时可以利用 defineEmits 来定义可被触发的自定义事件名称列表及其回调逻辑。
<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateCount']);

function increment() {
emit('updateCount');
}
</script>

<template>
<button @click="increment">Increment</button>
</template>
登录后复制
Context 支持
如果需要访问上下文对象（如 slots 或 attrs），则可通过组合 API 形式的 useContext() 函数获得完整的上下文信息。

示例总结
以上展示了如何运用 <script setup> 进行基本操作，包括但不限于自动引入子组件、设置响应式属性以及分发事件等功能。这些功能共同构成了一个高效便捷的开发环境，极大提升了编写维护大型应用项目的效率[^2]。