Vue3子组件怎么优雅暴露方法给父组件？

不管是刚从Vue2转过来的老开发者,还是刚入门Vue3的新手，在写父子组件交互时，难免会碰到“父组件要主动调用子组件里的函数”这种需求——比如父组件发号施令让子弹窗打开关闭、让子表格重新拉取数据、让子表单重置提交这类，Vue2里我们常用this.$refs.子组件名.子方法名直接调，但到了Vue3，尤其是组合式API（Composition API）普及后，this没那么好使了，而且组合式API的setup默认是不会暴露内部变量和方法的，所以得用专门的暴露方式，那到底有哪些方式？各自有什么优缺点？适合用在什么场景？今天咱们就彻底聊清楚。

首先得回忆一下：组合式API默认隐藏内部内容，这是为啥？

很多新手一开始踩坑,写了子组件的setup函数，里面定义了const openModal = () => { visible.value = true }，然后父组件加了ref，调childRef.value.openModal却报错“undefined”，就是因为Vue3的组合式API搞了“封装性优先”的设计：默认情况下，setup内部定义的所有变量、函数、计算属性，都是子组件私有的，外部组件（不管是父还是兄弟、甚至跨层级）都拿不到，这其实是个好事，之前Vue2里很多人滥用$refs，随便修改子组件内部状态、调用私有方法，导致代码耦合度特别高，维护起来像拆炸弹——换个子组件的内部逻辑，父组件跟着要改好几个地方，Vue3的这个设计就是逼着开发者先想：“这个方法真的需要暴露给外面吗？”如果真的需要，再用官方给的工具明确暴露出来，相当于给外部留了个“合法接口”，内部怎么变，接口不变就行。

Vue3暴露方法给父组件的核心工具：defineExpose

不管你用的是<script setup>语法糖（这个现在用得最多，必须重点讲），还是传统的setup()函数（搭配选项式API偶尔会用到），暴露内部内容的核心工具都是defineExpose宏（或者叫组合式API函数？其实<script setup>里它是编译器宏，不用引入；传统setup()里是从vue包里引入的函数），咱们先从最常用的<script setup>开始说。

场景1：用