Vue3 <script setup> 里的 defineProps / defineEmits / defineExpose 分别做什么？

这三个是 <script setup> 的编译器宏（无需 import，编译期处理）：

• defineProps：声明接收的 props（类型 + 默认值），返回一个对象可直接解构（需用 toRefs 保持响应性）
• defineEmits：声明可触发的事件，返回 emit 函数
• defineExpose：默认 <script setup> 的变量是私有的，用 defineExpose({...}) 显式暴露给父组件（父通过 ref 访问）

<script setup>
const props = defineProps({ msg: String })
const emit = defineEmits(['change'])
defineExpose({ reset })
</script>

区别于 Options API：组合式更简洁，且宏在编译期被擦除，不会出现在运行时。

同分类其他题目