defineexpose 是 vue 3 中唯一标准且必需的子组件暴露接口方式，用于控制父组件通过 ref 访问的内容，必须在顶层调用，支持同名简写、重命名及动态值，并建议配合 typescript 接口标注以提升类型安全。
在 Vue 3 的 <script setup></script> 单文件组件中，defineExpose 是唯一标准方式，用于显式控制哪些属性或方法能被父组件通过 ref 访问。它不是可选补充，而是必需入口——不调用，父组件拿到的子组件实例就是空对象。
暴露什么：只写你真需要外部调用的内容
不要把所有变量都扔进去。只暴露父组件明确需要的命令式能力，比如校验、重置、聚焦、获取当前状态等。例如：
-
暴露响应式数据：如
count（ref类型会自动解包，父组件直接读childRef.value.count） -
暴露函数：如
validate()、reset()、focusInput() -
暴露计算属性值：需先用
computed包一层再暴露，因为defineExpose不接受响应式包装器本身
怎么写：语法简洁，位置固定
必须写在 <script setup></script> 的顶层作用域，不能包裹在函数或条件中。支持对象简写和重命名：
- 同名简写：
defineExpose({ count, validate }) - 重命名暴露：
defineExpose({ currentCount: count, doValidate: validate }) - 动态值也可：
defineExpose({ version: '1.2.0', isReady: computed(() => dataLoaded.value) })
父组件怎么用：确保 ref 已绑定且时机正确
父组件需用 ref 绑定子组件，并在组件挂载后访问（如 onMounted 或事件回调中）：
- 模板中写：
<childcomponent ref="childRef"></childcomponent> - 脚本中声明：
const childRef = ref(null) - 调用时检查存在性：
if (childRef.value) { childRef.value.validate() } - 注意：SSR 或未挂载时
childRef.value是null，直接访问会报错
TypeScript 类型提示：让暴露内容可推导
搭配 TypeScript 时，建议为 defineExpose 显式标注接口，提升类型安全和 IDE 提示：
- 定义接口：
interface ChildExposed { count: number; validate: () => void; } - 暴露时标注：
defineExpose<childexposed>({ count: count.value, validate })</childexposed> - 父组件中
childRef.value就能获得完整类型推导，避免any
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
