Vue3 emits结合回调函数的使用方式
更新时间：2024年12月26日 08:42:08 作者：-小龙人
文章介绍了回调函数的概念,并通过一个简单的例子来说明其工作原理,接着,文章提到在Vue.js中,回调函数常用于子父组件之间的通信,父组件可以接受子组件的消息并调用回调函数,文章通过代码示例和解释,帮助读者理解回调函数在实际开发中的应用
Vue3 emits结合回调函数使用
回调函数
先说下啥是回调函数，举个例子：
当A方法调用B方法时，A方法会传一个方法作为参数给B方法，B方法中可以去按照逻辑执行A传递过的函数，就是回头再调用A方法传参给的方法。
有点绕哈，写段代码参考下：
const funA = () => {
// 业务逻辑 .....
funB('布拉布拉', 123, () => {
// 回调的业务逻辑
});
};
/**
* B 方法 最好加上ts约束
* @param param1 参数1
* @param param2 参数2
* @param fun1 参数函数1，这里是一个函数
*/
const funB = (param1:string, param2: number, fun1: Function){
// 拿到参数做业务 ....
// 执行参数函数，这里会执行到A方法中传递的方法
fun1();
}
其实vue中有很多这种示例：
如vue响应式的逻辑处理有很多都是将函数存储到map set集合中，然后去做逻辑，这里主要的思路就是方法传参不仅可以传递普通参数，也可以传递函数，集合存储亦是可以存储函数等待特殊类型。
emits调用回调函数
回到主题哈，结合上面的代码这里就很好理解了。
正常emits用于子父组件的通信，子组件通信父组件，使用回调函数就是想父组件接受了子组件的消息后再回调到子组件中。
// 子组件
emtis('demoBack', data, () => {
// 回调业务
});
// 父组件
<子组件 @demoBack="handleDemoBack">
const handleDemoBack = (data, fun) => {
// data 是传递的数据
// 执行回调函数
fun();
};总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成,这篇文章主要给大家介绍了关于vue3集成bpmn.js的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue+elementUI导出word打印方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vuex中五大属性和使用说明(包括辅助函数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家讲解了vue3 keepalive源码解析解决线上问题，需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了vue 解决兄弟组件、跨组件深层次的通信操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了详解Vue数据驱动原理的相关资料，帮助大家更好的理解和学习vue框架的相关知识，感兴趣的朋友可以了解下2020-11-11
在Vite + Vue3项目中,通过安装依赖、配置vite.config.js文件、运行构建命令,可以完成应用的打包过程,确保检查构建输出、环境变量、路由模式以及性能优化配置,此外,定期查阅官方文档和社区更新,可以获取最新功能和最佳实践2026-04-04
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下2022-12-12
使用vue-element-admin框架调用后端接口及跨域的问题
这篇文章主要介绍了使用vue-element-admin框架调用后端接口及跨域的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论