子组件需用 defineExpose 显式暴露方法或响应式数据，父组件通过 ref 在挂载后访问；Vue 自动解包 ref，暴露计算属性需用 computed 包裹；注意编译限制、拼写一致性和类型标注。
在 `<script setup>` 中，子组件默认不对外暴露任何内容，父组件无法直接访问其内部变量或方法。要让父组件能调用子组件的方法或读取响应式状态，必须用 `defineExpose` 显式声明可访问项。</script>
暴露方法和响应式数据
在子组件中，先定义好函数或 ref 数据，再统一通过 `defineExpose` 暴露出去。Vue 会自动解包 ref，父组件拿到的是原始值（仍具响应性）。
- 暴露函数：直接写函数名，如
defineExpose({ handleClick }) - 暴露 ref：写变量名即可，如
const count = ref(0); defineExpose({ count })，父组件访问childRef.value.count得到的是数字 0，不是 ref 对象 - 暴露计算属性：需用
computed包裹，如defineExpose({ fullName: computed(() => firstName.value + ' ' + lastName.value) })
父组件如何调用
父组件需用 ref 绑定子组件标签，并确保在组件挂载后（如 onMounted 或事件回调中）再访问 .value 上的暴露内容。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 模板中：
<ChildComponent ref="childRef" /> - 脚本中：
const childRef = ref(null)，之后可用childRef.value?.handleClick()或childRef.value?.count - 注意：未挂载时
childRef.value为null，建议加可选链或判空
类型提示与 TypeScript 支持
TS 项目中，推荐给 ref 添加类型标注，提升类型安全性和 IDE 提示体验。
立即学习“前端免费学习笔记（深入）”；
- 子组件可配合泛型明确暴露结构，例如：
defineExpose<{ count: number; reset: () => void }>({ count, reset }) - 父组件 ref 可标注为：
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null) - 实际开发中更常用自动推导：只要子组件用了
defineExpose，Volar 或 Vue Language Features 通常能准确推导出childRef.value的类型
常见错误与注意事项
defineExpose 是编译时宏，使用有严格限制，稍不注意就会报错或失效。
- 必须写在 `
