Vue3 emits結(jié)合回調(diào)函數(shù)的使用方式
更新時(shí)間：2024年12月26日 08:42:08 作者：-小龍人
文章介紹了回調(diào)函數(shù)的概念,并通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明其工作原理,接著,文章提到在Vue.js中,回調(diào)函數(shù)常用于子父組件之間的通信,父組件可以接受子組件的消息并調(diào)用回調(diào)函數(shù),文章通過(guò)代碼示例和解釋,幫助讀者理解回調(diào)函數(shù)在實(shí)際開(kāi)發(fā)中的應(yīng)用
Vue3 emits結(jié)合回調(diào)函數(shù)使用
回調(diào)函數(shù)
先說(shuō)下啥是回調(diào)函數(shù)，舉個(gè)例子：
當(dāng)A方法調(diào)用B方法時(shí)，A方法會(huì)傳一個(gè)方法作為參數(shù)給B方法，B方法中可以去按照邏輯執(zhí)行A傳遞過(guò)的函數(shù)，就是回頭再調(diào)用A方法傳參給的方法。
有點(diǎn)繞哈，寫(xiě)段代碼參考下：
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ù)等待特殊類(lèi)型。
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)文章
Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了webstorm添加*.vue文件支持，webstorm很多的插件內(nèi)置，不用安裝插件，下面嘗試用vue和es6做項(xiàng)目，有興趣的可以了解一下2018-05-05
vue點(diǎn)擊標(biāo)簽切換選中及互相排斥操作
這篇文章主要介紹了vue點(diǎn)擊標(biāo)簽切換選中及互相排斥操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue2.0設(shè)置全局樣式(less/sass和css)
這篇文章主要為大家詳細(xì)介紹了Vue2.0設(shè)置全局樣式(less/sass和css)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue2?利用echarts?單獨(dú)繪制省份,首先引入所需要的第三方模塊，通過(guò)示例代碼給大家介紹的非常詳細(xì)，文章末尾給大家補(bǔ)充介紹了vue2.x結(jié)合echarts2實(shí)現(xiàn)顯示具體省份熱力圖的問(wèn)題，需要的朋友可以參考下2022-01-01
django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼
這篇文章主要介紹了django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03