Vue3 emits結合回調(diào)函數(shù)的使用方式
更新時間：2024年12月26日 08:42:08 作者：-小龍人
文章介紹了回調(diào)函數(shù)的概念,并通過一個簡單的例子來說明其工作原理,接著,文章提到在Vue.js中,回調(diào)函數(shù)常用于子父組件之間的通信,父組件可以接受子組件的消息并調(diào)用回調(diào)函數(shù),文章通過代碼示例和解釋,幫助讀者理解回調(diào)函數(shù)在實際開發(fā)中的應用
Vue3 emits結合回調(diào)函數(shù)使用
回調(diào)函數(shù)
先說下啥是回調(diào)函數(shù)，舉個例子：
當A方法調(diào)用B方法時，A方法會傳一個方法作為參數(shù)給B方法，B方法中可以去按照邏輯執(zhí)行A傳遞過的函數(shù)，就是回頭再調(diào)用A方法傳參給的方法。
有點繞哈，寫段代碼參考下：
const funA = () => {
// 業(yè)務邏輯 .....
funB('布拉布拉', 123, () => {
// 回調(diào)的業(yè)務邏輯
});
};
/**
* B 方法 最好加上ts約束
* @param param1 參數(shù)1
* @param param2 參數(shù)2
* @param fun1 參數(shù)函數(shù)1，這里是一個函數(shù)
*/
const funB = (param1:string, param2: number, fun1: Function){
// 拿到參數(shù)做業(yè)務 ....
// 執(zhí)行參數(shù)函數(shù)，這里會執(zhí)行到A方法中傳遞的方法
fun1();
}
其實vue中有很多這種示例：
如vue響應式的邏輯處理有很多都是將函數(shù)存儲到map set集合中，然后去做邏輯，這里主要的思路就是方法傳參不僅可以傳遞普通參數(shù)，也可以傳遞函數(shù)，集合存儲亦是可以存儲函數(shù)等待特殊類型。
emits調(diào)用回調(diào)函數(shù)
回到主題哈，結合上面的代碼這里就很好理解了。
正常emits用于子父組件的通信，子組件通信父組件，使用回調(diào)函數(shù)就是想父組件接受了子組件的消息后再回調(diào)到子組件中。
// 子組件
emtis('demoBack', data, () => {
// 回調(diào)業(yè)務
});
// 父組件
<子組件 @demoBack="handleDemoBack">
const handleDemoBack = (data, fun) => {
// data 是傳遞的數(shù)據(jù)
// 執(zhí)行回調(diào)函數(shù)
fun();
};總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue.js實現(xiàn)一個漂亮、靈活、可復用的提示組件示例
這篇文章主要介紹了Vue.js實現(xiàn)一個漂亮、靈活、可復用的提示組件示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了webstorm添加*.vue文件支持，webstorm很多的插件內(nèi)置，不用安裝插件，下面嘗試用vue和es6做項目，有興趣的可以了解一下2018-05-05
這篇文章主要介紹了vue點擊標簽切換選中及互相排斥操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue實現(xiàn)百度下拉列表交互操作,結合實例形式分析了vue.js使用jsonp針對百度接口進行交互的相關操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細介紹了Vue2.0設置全局樣式(less/sass和css)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue2?利用echarts?單獨繪制省份,首先引入所需要的第三方模塊，通過示例代碼給大家介紹的非常詳細，文章末尾給大家補充介紹了vue2.x結合echarts2實現(xiàn)顯示具體省份熱力圖的問題，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了django+vue實現(xiàn)注冊登錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03