Vue3 emits 结合回调函数的使用

-小龙人2024-01-27 21:35

回调函数

先说下啥是回调函数，举个例子，当A方法调用B方法时，A方法会传一个方法作为参数给B方法，B方法中可以去按照逻辑执行A传递过的函数，就是回头再调用A方法传参给的方法。有点绕哈，写段代码参考下

javascript 复制代码

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用于子父组件的通信，子组件通信父组件，使用回调函数就是想父组件接受了子组件的消息后再回调到子组件中。

javascript 复制代码

// 子组件
emtis('demoBack', data, () => {
	// 回调业务
});


// 父组件
<子组件 @demoBack="handleDemoBack">

const handleDemoBack = (data, fun) => {
	// data 是传递的数据

	// 执行回调函数
	fun();
};