Vue中$emit調(diào)用父組件異步方法模擬.then實現(xiàn)方式
更新時間：2024年09月03日 08:44:22 作者：果粒橙er
這篇文章主要介紹了Vue中$emit調(diào)用父組件異步方法模擬.then實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
$emit調(diào)用父組件異步方法模擬.then實現(xiàn)
需求
有一個封裝好的彈窗子組件，點確認(rèn)時$emit父組件刪除方法，父組件刪除接口調(diào)用成功后需要調(diào)用子組件close()方法。
- 方法：1可以直接$refs.dialog.close()關(guān)閉彈窗
- 方法2：可以模擬.then在子組件實現(xiàn)這一邏輯
父組件事件：
delConfirm(params, callback) {
// reqName是請求名
reqName(params).then(res => {
if (res.success) {
this.$message.success('刪除成功！')
callback() // 回調(diào)子組件關(guān)閉彈窗
this.getList() // 刪除一條后刷新列表
}
})
},
子組件確認(rèn)按鈕事件：
confirm() {
// params是攜帶的參數(shù) 傳給父組件 callback后回調(diào)的內(nèi)容是close()方法
this.$emit('delConfirm', this.params, () => {
this.close()
})
}
$emit調(diào)用父組件異步方法，返回結(jié)果后再執(zhí)行子組件的方法
現(xiàn)象
子組件請求父組件的方法，觸發(fā)數(shù)據(jù)更新，待數(shù)據(jù)返回后，才能進(jìn)行后續(xù)的操作
解決
使用回調(diào)函數(shù)的方式
父組件：
async getTaskListDetails(callback = () => {}) {
const { pageSize, currentPage } = this.pagination
const [res, err] = await taskListDetails({
limit: pageSize,
start: pageSize * (currentPage - 1)
})
if (err) return this.$message.error(err?.msg || '請求失敗')
if (res.code !== 200) return this.$message.error(res?.msg || '請求失敗')
this.dataList = res?.data?.list || []
this.mainTask = res.data.main_task
this.pagination.total = res.data.count
callback(this.dataList)
}子組件：
this.$emit('updateList', (res) => {
this.checkTaskProgress(res)
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家分享的是如何使用vue實現(xiàn)鼠標(biāo)點擊選中的效果，附上了實例代碼，有需要的小伙伴可以參考下2020-10-10
keep-alive是vue中的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,本文給大家介紹vue中的keep-alive詳解與應(yīng)用場景,感興趣的朋友一起看看吧2023-11-11
使用vue進(jìn)行Lodop打印的一些常用方法小結(jié)
這篇文章主要給大家介紹了關(guān)于使用vue進(jìn)行Lodop打印的一些常用方法,需要進(jìn)行打印功能,Lodop就是實現(xiàn)需求的插件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
本文主要介紹了element中drawer模板的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue?3.0?v-for中的Ref數(shù)組用法小結(jié)
在?Vue?2?中,在?v-for?里使用的?ref?attribute會用ref?數(shù)組填充相應(yīng)的?$refs?property,本文給大家介紹Vue?3.0?v-for中的Ref數(shù)組的相關(guān)知識,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)
這篇文章主要介紹了Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)2022-08-08
vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例
今天小編就為大家分享一篇vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在Vue中,通過自定義指令v-copy和document.execCommand方法,可以實現(xiàn)點擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧2024-09-09
網(wǎng)站國際化多語言處理工具i18n安裝使用方法圖文詳解
國際化是設(shè)計軟件應(yīng)用的過程中應(yīng)用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國際化多語言處理工具i18n安裝使用方法的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09