Vue3 emits結(jié)合回調(diào)函數(shù)的使用方式
更新時(shí)間：2024年12月26日 08:42:08 作者：-小龍人
文章介紹了回調(diào)函數(shù)的概念,并通過一個(gè)簡(jiǎn)單的例子來說明其工作原理,接著,文章提到在Vue.js中,回調(diào)函數(shù)常用于子父組件之間的通信,父組件可以接受子組件的消息并調(diào)用回調(diào)函數(shù),文章通過代碼示例和解釋,幫助讀者理解回調(diào)函數(shù)在實(shí)際開發(fā)中的應(yīng)用
Vue3 emits結(jié)合回調(diào)函數(shù)使用
回調(diào)函數(shù)
先說下啥是回調(diào)函數(shù)，舉個(gè)例子：
當(dāng)A方法調(diào)用B方法時(shí)，A方法會(huì)傳一個(gè)方法作為參數(shù)給B方法，B方法中可以去按照邏輯執(zhí)行A傳遞過的函數(shù)，就是回頭再調(diào)用A方法傳參給的方法。
有點(diǎn)繞哈，寫段代碼參考下：
const funA = () => {
// 業(yè)務(wù)邏輯 .....
funB('布拉布拉', 123, () => {
// 回調(diào)的業(yè)務(wù)邏輯
});
};
/**
* B 方法 最好加上ts約束
* @param param1 參數(shù)1
* @param param2 參數(shù)2
* @param fun1 參數(shù)函數(shù)1，這里是一個(gè)函數(shù)
*/
const funB = (param1:string, param2: number, fun1: Function){
// 拿到參數(shù)做業(yè)務(wù) ....
// 執(zhí)行參數(shù)函數(shù)，這里會(huì)執(zhí)行到A方法中傳遞的方法
fun1();
}
其實(shí)vue中有很多這種示例：
如vue響應(yīng)式的邏輯處理有很多都是將函數(shù)存儲(chǔ)到map set集合中，然后去做邏輯，這里主要的思路就是方法傳參不僅可以傳遞普通參數(shù)，也可以傳遞函數(shù)，集合存儲(chǔ)亦是可以存儲(chǔ)函數(shù)等待特殊類型。
emits調(diào)用回調(diào)函數(shù)
回到主題哈，結(jié)合上面的代碼這里就很好理解了。
正常emits用于子父組件的通信，子組件通信父組件，使用回調(diào)函數(shù)就是想父組件接受了子組件的消息后再回調(diào)到子組件中。
// 子組件
emtis('demoBack', data, () => {
// 回調(diào)業(yè)務(wù)
});
// 父組件
<子組件 @demoBack="handleDemoBack">
const handleDemoBack = (data, fun) => {
// data 是傳遞的數(shù)據(jù)
// 執(zhí)行回調(diào)函數(shù)
fun();
};總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue+elementUI導(dǎo)出word打印方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vuex中五大屬性和使用說明(包括輔助函數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家講解了vue3?keepalive源碼解析解決線上問題，需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
本篇文章主要介紹了vue自定義全局組件并通過全局方法 Vue.use() 使用該組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了vue 解決兄弟組件、跨組件深層次的通信操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
詳解Vue數(shù)據(jù)驅(qū)動(dòng)原理
這篇文章主要介紹了詳解Vue數(shù)據(jù)驅(qū)動(dòng)原理的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
在Vite + Vue3項(xiàng)目中,通過安裝依賴、配置vite.config.js文件、運(yùn)行構(gòu)建命令,可以完成應(yīng)用的打包過程,確保檢查構(gòu)建輸出、環(huán)境變量、路由模式以及性能優(yōu)化配置,此外,定期查閱官方文檔和社區(qū)更新,可以獲取最新功能和最佳實(shí)踐2026-04-04
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-12-12
使用vue-element-admin框架調(diào)用后端接口及跨域的問題
這篇文章主要介紹了使用vue-element-admin框架調(diào)用后端接口及跨域的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11