Vue中$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)方式
更新時(shí)間：2024年09月03日 08:44:22 作者：果粒橙er
這篇文章主要介紹了Vue中$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)
需求
有一個(gè)封裝好的彈窗子組件，點(diǎn)確認(rèn)時(shí)$emit父組件刪除方法，父組件刪除接口調(diào)用成功后需要調(diào)用子組件close()方法。
- 方法：1可以直接$refs.dialog.close()關(guān)閉彈窗
- 方法2：可以模擬.then在子組件實(shí)現(xiàn)這一邏輯
父組件事件：
delConfirm(params, callback) {
// reqName是請(qǐng)求名
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)象
子組件請(qǐng)求父組件的方法，觸發(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 || '請(qǐng)求失敗')
if (res.code !== 200) return this.$message.error(res?.msg || '請(qǐng)求失敗')
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
element-ui重置resetFields()不生效的解決
本文主要介紹了element-ui重置resetFields()不生效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
如何通過(guò)Vue實(shí)現(xiàn)@人的功能
這篇文章主要介紹了如何通過(guò)vue實(shí)現(xiàn)微博中常見(jiàn)的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁(yè)面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
解決ElementUI中tooltip出現(xiàn)無(wú)法顯示的問(wèn)題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無(wú)法顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了如何運(yùn)行vue項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3中v-if和v-for優(yōu)先級(jí)實(shí)例詳解
Vue.js中使用最多的兩個(gè)指令就是v-if和v-for,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-if和v-for優(yōu)先級(jí)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法
這篇文章主要介紹了vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
詳解vue.js 開(kāi)發(fā)環(huán)境搭建最簡(jiǎn)單攻略
本篇文章主要介紹了vue.js 開(kāi)發(fā)環(huán)境搭建最簡(jiǎn)單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue實(shí)現(xiàn)pdf在線預(yù)覽功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)pdf在線預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件
這篇文章主要為大家詳細(xì)介紹了vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04