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

vue3+ts,父组件通过子组件的ref主动获取子组件传来的数据，涉及到的defineExpose和callback函数讲解

前言
一、子组件通过defineExpose主动给父组件传值的步骤
- 1.子组件定义好需要传给父组件的方法，然后做暴露
- 2.父组件通过子组件的ref获取子组件传过来的属性或方法
一、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
})

2.父组件通过子组件的ref获取子组件传过来的属性或方法

代码如下（示例）：

//在父组件中引入了<info></info>子组件
<div class="steps-pane">
   <info ref="infoRef" :dec-inner-data="DecInnerdata" />
</div>
//通过ref获取子组件暴露的方法
function saveInfo() {
  infoRef.value?.submitInfo(
    (tableData: Record<string, string>[]) => {
      console.log(tableData)
    }
  )
}

一、callback回调函数的处理逻辑

在上述示例的过程中，我们使用到了callback回调函数，所谓的回调函数，其实就是先将回调函数的代码冻结（或者理解为闲置），接着将这个回调函数的代码放到回调函数管理器的队列里面。
待回调函数被触发调用的时候，对应的回调函数的代码才会从管理器队列取出来并自动执行（激活回调函数的代码），实现异步的编程效果。

下面配合defineExpose再来一段代码例子：

//1.定义需要暴露出去的方法
function submitBasicInfo(callback: (data: Record<string, string>[], callback: () => void) => void) {
  callback(tableData, () => {
  //这是一个刷新数据的执行方法
    getChangeInfo()
  })
}
//2.暴露
defineExpose({
  submitBasicInfo
})
//3.父组件中引入子组件<basic-info>
<div v-show="stepActive === 2" class="steps-pane">
    <basic-info ref="basicInfoRef"/>
</div>
//4.父组件通过子组件的ref获取数据或者非方法
function saveBasicInfo() {
  basicInfoRef.value?.submitBasicInfo(
    (tableData: Record<string, string>[], callback: () => void) => {
      //(tableData)
      batchSaveBasicData(tableData).then((res) => {
        if (res.code === 200) {
          proxy.$message.success(proxy.$t('编辑基础信息成功'))
          callback && callback()
        }
      })
    }
  )
}

在上述例子中，通过回调函数给父组件传递了数据和方法，submitBasicInfo(callback: (data: 数据类型, callback: () => void)，括号里的参数，第一个data是传递的数据，第二个callback: () => void传递的是方法，后面自己忘记可以回来多看几遍研究一下callback函数的语法。callback && callback() 的含义：表示如果传入了callback，那么就调用callback()回调函数，反之就是不调用。
相当于如下代码：

	if(callback){
		callback()
		}

秒客网