vue3+ts,父组件通过ref主动获取子组件的数据，涉及到的defineExpose和callback函数讲解_vue 子组件外抛使用callback方式

---

前言

我们知道在vue3中组件之间传数据传值的方法大概分为三种。

第一种：父组件给子组件传值，子组件通过defineProps接收数据。
第二种：子组件给父组件传值，父组件被动接收，在子组件通过defineEmits定义事件进行数据传递。
第三种：子组件给父组件传值，父组件主动接收，在子组件通过defineExpose暴露方法把数据或者某方法暴露给父组件。

这篇文章主要是对第三种传值方法进行详细记录说明，以及在使用过程中涉及到的callback()回调函数进行语法使用介绍。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、子组件通过defineExpose主动给父组件传值的步骤

defineExpose是vue3新增的一个api，主要用于父子之间的通信，目的是把子组件的属性和方法暴露出去， 父组件用ref获取子组件传过来的数据或方法。

1.子组件定义好需要传给父组件的方法，然后做暴露

代码如下（示例）：

//传给父组件的方法
function submitInfo(callback: (data: Record<string, string>[]) => void) {
  callback(tableData)
}
//用defineExpose把方法暴露出去
defineExpose({
  submitInfo
})