`defineProps` và `defineEmits` trong `<script setup>`?

defineProps khai báo props mà component nhận, defineEmits khai báo events mà component emit:

// TypeScript style (recommended)
const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'close'): void
}>()

// Dùng
emit('update', 42)

Lưu ý: defineProps không thể destructure trực tiếp mà giữ reactivity trong Vue 3.4 trở về trước — dùng toRefs(props).

Từ Vue 3.5+: destructure props với const { title } = defineProps() giữ reactivity.

defineProps declares the props a component receives; defineEmits declares events it can emit:

// TypeScript style (recommended)
const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'close'): void
}>()

// Usage
emit('update', 42)

Pitfall: In Vue ≤ 3.4, destructuring defineProps loses reactivity — use toRefs(props).

From Vue 3.5+: destructuring props with const { title } = defineProps() preserves reactivity.