vue使用$emit實現(xiàn)同步調(diào)用

更新時間：2024年04月18日 11:28:35 作者：markix

這篇文章主要介紹了vue使用$emit實現(xiàn)同步調(diào)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue $emit同步調(diào)用

標(biāo)題換一種說法：vue $emit 調(diào)用父組件異步方法，執(zhí)行完畢后再執(zhí)行子組件的某方法

1.使用回調(diào)的形式

異步方法執(zhí)行完成的時間只有父組件知道，如果子組件需要在異步方式執(zhí)行之后執(zhí)行某些邏輯，那么可以將這些邏輯封裝成一個方法傳遞到父組件，由父組件來觸發(fā)執(zhí)行。

父組件

// 組件的html中添加事件 @getData="getData"
methods : {
	getData(params, callback) {
		console.log("子組件的傳遞到父組件的參數(shù)", params);
		console.log("模擬發(fā)送后臺異步請求，延遲3s...");
		setTimeout(() => {
			console.log("異步請求結(jié)束，執(zhí)行回調(diào)函數(shù)");
			callback("父組件傳到子組件的文本666")
		}, 3000)
	}
}

子組件

// 通過 $emit 觸發(fā)父組件的方法
// 參數(shù)：觸發(fā)的事件名稱、事件參數(shù)，事件參數(shù)
// 把方法當(dāng)做事件參數(shù)傳遞到父組件，由父組件調(diào)用執(zhí)行。
this.$emit('getData', 10, (res)=> {
	console.log("父組件的返回結(jié)果：", res); //由父組件調(diào)用
})

2.通過$refs調(diào)用組件方法的形式

異步方法執(zhí)行完成的時間只有父組件知道，如果子組件需要在異步方式執(zhí)行之后執(zhí)行某些邏輯，那么可以通過 $refs 拿到子組件的實例，調(diào)用其方法父組件

// 組件的html中添加事件 @getData="getData"，添加 ref="childRef"
methods : {
	getData(params) {
		console.log("子組件的傳遞到父組件的參數(shù)", params);
		console.log("模擬發(fā)送后臺異步請求，延遲3s...");
		setTimeout(() => {
			console.log("異步請求結(jié)束，通過 $refs 調(diào)用組件方法");
			this.$refs.childRef.doSomeThing("數(shù)據(jù)");
		}, 3000)
	}
}

子組件

methods : {
	doSomeThing(data) {
		console.log("父組件的返回結(jié)果：", res); //由父組件調(diào)用
	}
} 
// 通過 $emit 觸發(fā)父組件的方法
// 參數(shù)：觸發(fā)的事件名稱、事件參數(shù)，事件參數(shù)
// 把方法當(dāng)做事件參數(shù)傳遞到父組件，由父組件調(diào)用執(zhí)行。
this.$emit('getData', 10)