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