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

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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

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

	if(callback){


### HTTP

* HTTP 报文结构是怎样的？

* HTTP有哪些请求方法？

* GET 和 POST 有什么区别？

* 如何理解 URI？

* 如何理解 HTTP 状态码？

* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

* 对 Accept 系列字段了解多少？

* 对于定长和不定长的数据，HTTP 是怎么传输的？

* HTTP 如何处理大文件的传输？

* HTTP 中如何处理表单数据的提交？

* HTTP1.1 如何解决 HTTP 的队头阻塞问题？

* 对 Cookie 了解多少？

* 如何理解 HTTP 代理？

* 如何理解 HTTP 缓存及缓存代理？

* 为什么产生代理缓存？

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域？浏览器如何拦截响应？如何解决？  

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

![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)