欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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à)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

$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是請求名
      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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論