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

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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) => {
      //console.log(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()回调函数，反之就是不调用。
相当于如下代码：

### ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

![ajax.PNG](https://img-blog.csdnimg.cn/img_convert/e3a8a954409b0e8ff514068c0e2c8625.webp?x-oss-process=image/format,png)

![前12.PNG](https://img-blog.csdnimg.cn/img_convert/ab562bdd245099f3440613ec255dc281.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

-1715831750945)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**