<script setup> 有什么特点？编译宏怎么用？

// 写法一：类型声明 + withDefaults 设置默认值
const props = withDefaults(defineProps<{ size?: string; disabled?: boolean }>(), {
  size: 'small',
  disabled: false,
})

// 写法二（Vue 3.5 起）：响应式解构，默认值直接写在解构中。一个组件只能调用一次 defineProps，二选一
const { size = 'small', disabled = false } = defineProps<{ size?: string; disabled?: boolean }>()

// 用类型声明事件（具名元组的写法需要 Vue 3.3+）
const emit = defineEmits<{ change: [value: string]; close: [] }>()

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

const props = defineProps({ step: { type: Number, default: 1 } })
const emit = defineEmits(['change'])

const count = ref(0)

function increase() {
  count.value += props.step
  emit('change', count.value)
}

function reset() {
  count.value = 0
}

// 只暴露 reset，父组件访问不到 count 和 increase
defineExpose({ reset })
</script>

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

<script setup>
import { ref } from 'vue'
import Counter from './Counter.vue'

// 变量名和模板中的 ref="counterRef" 一致，挂载后就能拿到子组件暴露的内容（Vue 3.5 起也可以用 useTemplateRef）
const counterRef = ref(null)

function onChange(value) {
  console.log('当前计数：', value)
}

function resetCounter() {
  counterRef.value?.reset()
}
</script>

<template>
  <Counter ref="counterRef" :step="2" @change="onChange" />
  <button @click="resetCounter">重置</button>
</template>