defineExpose 是 Vue 3 <script setup> 中暴露子组件能力的唯一标准且必须显式调用的编译宏；需在顶层静态声明暴露项，支持 ref、函数、computed（需包裹）及别名，父组件须通过 ref 在挂载后访问，并推荐配合 TypeScript 提升类型安全。
Vue 3 中使用 defineExpose 是在 <script setup> 语法下暴露子组件能力的唯一标准方式。它不是可选优化，而是必须显式调用的编译宏——不写就无法被父组件访问。
子组件：明确列出要暴露的内容
在子组件的 <script setup> 中，先定义好变量或函数，再统一通过 defineExpose 暴露出去。Vue 会自动解包 ref，父组件拿到的是原始值（仍保持响应性）。
- 暴露
ref数据：直接写变量名，例如const count = ref(0); defineExpose({ count }) - 暴露普通函数：写函数名即可，例如
const reset = () => { count.value = 0 }; defineExpose({ reset }) - 暴露
computed：必须用computed包裹，例如defineExpose({ fullName: computed(() => firstName.value + ' ' + lastName.value) }) - 暴露别名方法：支持重命名，例如
defineExpose({ submitForm: handleSubmit })
父组件：确保挂载后再访问
父组件需用 ref 绑定子组件标签，并在子组件完成挂载后才能安全调用其暴露内容。未挂载时 childRef.value 是 null。
- 模板中写：
<ChildComponent ref="childRef" /> - 脚本中声明：
const childRef = ref(null) - 在
onMounted或事件回调中调用：childRef.value?.reset()或console.log(childRef.value?.count) - 推荐加可选链（
?.）或判空，避免运行时错误
TypeScript 类型提示更可靠
配合 TypeScript 可显著提升开发体验和类型安全。
立即学习“前端免费学习笔记（深入）”；
- 子组件可标注暴露结构：
defineExpose<{ count: number; reset: () => void }>({ count, reset }) - 父组件的 ref 通常无需手动泛型，Volar 插件能自动推导出
childRef.value的完整类型 - 如果需要显式标注，可用：
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null)
常见误区与限制
defineExpose 是编译期宏，有严格使用规则，写错位置或时机都会失效。
- 必须写在
<script setup>顶层作用域，不能在函数、条件语句或异步回调内调用 - 拼写必须完全一致：父组件访问的属性名，必须和
defineExpose对象里的键名一模一样 - 未出现在
defineExpose对象中的任何变量、函数、computed，对父组件完全不可见 - 不支持动态 key，对象必须是静态字面量（如不能写
defineExpose({ [key]: value })）
