defineexpose 是 vue 3 中暴露子组件能力的唯一标准且必须显式调用的编译宏；需在顶层静态声明暴露项，支持 ref、函数、computed（需包裹）及别名，父组件须通过 ref 在挂载后访问，并推荐配合 typescript 提升类型安全。
Vue 3 中使用 defineExpose 是在 <script setup></script> 语法下暴露子组件能力的唯一标准方式。它不是可选优化，而是必须显式调用的编译宏——不写就无法被父组件访问。
子组件：明确列出要暴露的内容
在子组件的 <script setup></script> 中，先定义好变量或函数，再统一通过 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"></childcomponent> - 脚本中声明：
const childRef = ref(null) - 在
onMounted或事件回调中调用：childRef.value?.reset()或console.log(childRef.value?.count) - 推荐加可选链（
?.）或判空，避免运行时错误
TypeScript 类型提示更可靠
配合 TypeScript 可显著提升开发体验和类型安全。
- 子组件可标注暴露结构：
defineExpose void }>({ count, reset }) - 父组件的 ref 通常无需手动泛型，Volar 插件能自动推导出
childRef.value的完整类型 - 如果需要显式标注，可用：
const childRef = ref<instancetype childcomponent> | null>(null)</instancetype>
常见误区与限制
defineExpose 是编译期宏，有严格使用规则，写错位置或时机都会失效。
- 必须写在
<script setup></script>顶层作用域，不能在函数、条件语句或异步回调内调用 - 拼写必须完全一致：父组件访问的属性名，必须和
defineExpose对象里的键名一模一样 - 未出现在
defineExpose对象中的任何变量、函数、computed，对父组件完全不可见 - 不支持动态 key，对象必须是静态字面量（如不能写
defineExpose({ [key]: value })）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
