<script setup>中如何写

`<script setup>` 是 Vue 3 新引入的语法糖，可以更简洁地编写组件逻辑。下面是一些 `<script setup>` 中常用的语法。

1. 定义组件选项：

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0
})

function increment() {
  state.count++
}

export { state, increment }
</script>

2. 定义 props：

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  message: String
})

export { props }
</script>

3. 定义组件事件：

<template>
  <button @click="increment">{{ count }}</button>
</template>

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

const count = ref(0)

function increment() {
  count.value++
}

// 触发事件的方式
const emit = (event, ...args) => {
  const handler = `on${event.charAt(0).toUpperCase()}${event.slice(1)}`
  if (props[handler]) {
    props[handler](...args)
  }
}

export { count, increment, emit }
</script>

需要注意的是，`<script setup>` 中不能访问 `this`，因为它是在编译时处理的。如果需要访问 `this`，可以使用 `getCurrentInstance()` 方法获取当前组件实例。