阿杰酱_6071
发布时间：2026-08-26 14:16:29
|308人浏览过
|来源于php中文网
原创
defineExpose 必须显式暴露子组件的 ref、reactive 或方法，否则父组件无法访问；暴露后父组件可通过 ref.value 直接读写响应式数据或调用函数；推荐用 TypeScript 泛型提供类型提示。
![vue 3 怎么在 `<script setup>` 中使用 defineexpose 暴露子组件内部状态"></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill1140" title="Vue"><img
src="https://img.php.cn/upload/skill/000/000/081/178797612947731.jpg" alt="Vue" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill1140" title="Vue">Vue</a>
<p>避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。</p>
</div>
<a href="/xiazai/skill1140" title="Vue" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>在 `<script setup>` 中使用 `defineExpose` 暴露子组件内部状态，核心就一句话：**不显式暴露，父组件就完全访问不到**。因为 `<script setup>` 默认是封闭的，所有变量、方法、ref 都不会自动挂载到组件实例上。
下面直接说清楚怎么用、暴露什么、要注意什么。
<H3>暴露响应式数据（比如 ref 或 reactive）
<p>子组件中定义的 `ref` 或 `reactive` 对象，可以直接列在 `defineExpose` 对象里：
<p><font color="#888">子组件 Child.vue
<pre class='brush:php;toolbar:false;'><script setup>
import { ref, reactive } from 'vue'
const count = ref(0)
const userInfo = reactive({ name: '张三', age: 28 })
// ✅ 正确：直接暴露 ref 和 reactive
defineExpose({ count, userInfo })
</script></pre>
<p>父组件通过 `ref` 获取后，能直接读写：<br>
<code>childRef.value.count 是数字（自动解包），<br>
<code>childRef.value.userInfo.name 可读可改。
<H3>暴露方法（函数）
<p>把需要被父组件调用的函数列进去即可：
<pre class='brush:php;toolbar:false;'><script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
const reset = () => count.value = 0
// ✅ 暴露方法 + 数据
defineExpose({ count, increment, reset })
</script></pre>
<p>父组件调用：<br>
<code>childRef.value.increment() 或 <code>childRef.value.reset() —— 无需 `.value`，直接执行。
<H3>TypeScript 类型提示（推荐加）
<p>加泛型能让父组件获得完整类型推导，避免 `any`：<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；
<pre class='brush:php;toolbar:false;'><script setup lang="ts">
import { ref } from 'vue'
interface FormData {
title: string
tags: string[]
}
const form = ref<FormData>({ title: '', tags: [] })
const validate = (): boolean => form.value.title.length > 0
// ✅ 类型安全暴露
defineExpose<{ form: typeof form; validate: typeof validate }>({
form,
validate
})
</script></pre>
<p>VSCode + Volar 下，父组件输入 <code>childRef.value. 就能精准提示 `form` 和 `validate`，且调用时参数/返回值都有检查。
<H3>不暴露的内容，父组件真的一点都拿不到
<p>比如你在子组件写了：<br>
<code>const secretData = ref('仅内部使用')<br>
但没放进 `defineExpose`，那父组件访问 <code>childRef.value.secretData 就是 <code>undefined —— 不是报错，而是根本不存在。
<p>这是封装性的保障，不是 bug，是设计。</script> </div>
<div class=](https://img.php.cn/upload/article/001/242/473/178772499095981.jpg)
相关文章
Vue 3 中使用 ref 时常见的空值报错（null）怎么优雅排查与处理
Vue 3 中怎么用 watchEffect 实现长文本阅读进度的自动埋点上报
Vue 3 单文件组件怎么使用自定义指令（v-focus 等）增强 DOM 交互
Vue 3 模板语法中怎么给组件绑定带有修饰符的动态属性
Vue 3 中用 ref 定义的数组直接通过索引修改元素会触发视图更新吗
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。
2043
2023.08.11
实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。
4343
2023.10.09
前端外包工作内容包括：1. 网站和应用程序开发；2. 用户界面和交互设计；3. 用户体验优化；4. 设计和视觉开发；5. 跨浏览器兼容性；6. 性能优化；7. 维护和更新；8. 项目管理和沟通。想了解更多前端的相关内容，可以阅读本专题下面的文章。
683
2024.05.22
vue2.0和3.0区别：vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现，vue3中使⽤了es6的proxy API对数据代理，实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容，供大家免费下载体验。
1594
2023.07.17
vue3的生命周期：1、beforecreate；2、created；3、beforemount；4、mounted；5、beforeupdate；6、updated；7、beforedestroy；8、destroyed；9、activated；10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
11602
2024.02.23
本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧，深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例，指导前端开发者实现高性能、结构清晰的 Vue 应用，提升开发效率与代码可维护性。
256
2026.02.10
本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程，涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作，并整理了免费版水印规则与手机端浏览器访问指南，助你快速将知识内容视频化。
0
2026.09.21
热门下载
相关下载
精品课程
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn
