vue父子组件处理异步操作

emit("toolbarClick", name) 触发的事件可能会调用一个接口,在接口返回后再关闭 itemLoading。由于 emit 触发的自定义事件返回值通常不会是 Promise,实际异步操作应该在监听该事件的组件里处理。下面给出两种不同场景下的解决方案。

场景一:在当前组件处理异步操作

若异步操作在当前组件里处理,可将异步操作封装成 Promise 并返回,确保 toolbarResultPromise 对象。

xml 复制代码
PageContent.vue
Apply
<script setup>
// ... 已有代码 ...

// 操作栏
function handleToolbar(name) {
  switch (name) {
    // ... 已有代码 ...
    default:
      itemLoading[name] = true; // 开始加载
      // 自定义事件处理函数返回 Promise
      const toolbarResult = new Promise((resolve) => {
        const result = emit("toolbarClick", name, resolve);
        // 如果 emit 返回的本身就是 Promise,直接使用
        if (isPromise(result)) {
          result.then(resolve).catch(resolve);
        }
      });

      if (isPromise(toolbarResult)) {
        toolbarResult.finally(() => {
          itemLoading[name] = false; // 结束加载
        });
      } else {
        itemLoading[name] = false; // 非 Promise 直接结束加载
      }
      break;
  }
}

// ... 已有代码 ...
</script>

场景二:在父组件处理异步操作

若异步操作在父组件处理,可在父组件监听 toolbarClick 事件时,通过传入的回调函数告知当前组件操作完成。

当前组件(PageContent.vue)

xml 复制代码
PageContent.vue
Apply
<script setup>
// ... 已有代码 ...

// 操作栏
function handleToolbar(name) {
  switch (name) {
    // ... 已有代码 ...
    default:
      itemLoading[name] = true; // 开始加载
      emit("toolbarClick", name, () => {
        itemLoading[name] = false; // 结束加载
      });
      break;
  }
}

// ... 已有代码 ...
</script>

父组件示例

xml 复制代码
vue
Apply
<template>
  <PageContent @toolbarClick="handleToolbarClick" />
</template>

<script setup>
import PageContent from './PageContent.vue';

// 处理 toolbarClick 事件
const handleToolbarClick = async (name, done) => {
  try {
    // 模拟异步接口调用
    await new Promise((resolve) => setTimeout(resolve, 2000));
    console.log(`接口调用完成: ${name}`);
  } catch (error) {
    console.error('接口调用出错:', error);
  } finally {
    // 调用 done 函数告知子组件操作完成
    done(); 
  }
};
</script>

总结如下:

  • 场景一:把异步操作封装成 Promise,确保 toolbarResultPromise 对象,在 finally 里关闭加载状态。
  • 场景二:在父组件监听事件时,通过传入的回调函数告知子组件操作完成,从而关闭加载状态。

若异步操作在当前组件处理,推荐场景一;若在父组件处理,推荐场景二。

相关推荐
Kevin Wang72740 分钟前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic44 分钟前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年1 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊3 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088503 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili3 小时前
用 Tinymce 打造智能写作
前端