Nuxt3按钮点击处理：Emit前后更新isLoading状态遇异常

核心问题分析 #

你之前的实现失效，大概率是因为没正确等待父组件中$emit触发的异步操作完成，或是未妥善处理异步操作中的错误，导致finally块未执行，isLoading一直停留在true状态。

正确实现方案 #

1. 子组件封装加载状态与提交逻辑

用ref维护加载状态，把直接$emit的逻辑封装成异步方法，确保等待父组件操作完成后再重置状态：

<script setup>
import { ref } from 'vue';

const isLoading = ref(false);
const form = ref({ /* 你的表单数据结构 */ });

// 封装提交逻辑
const handleSubmit = async () => {
  isLoading.value = true;
  try {
    // 等待父组件的异步处理完成
    await $emit('method', form.value);
  } catch (err) {
    // 可选：处理操作失败，比如提示用户
    console.error('操作失败:', err);
  } finally {
    // 无论成功/失败，都重置加载状态
    isLoading.value = false;
  }
};
</script>

<template>
  <UButton 
    :loading="isLoading" 
    @click.prevent="handleSubmit"
  >
    执行操作
  </UButton>
</template>

2. 父组件确保监听函数返回Promise

父组件处理method事件的函数必须是异步函数（返回Promise），这样子组件的await $emit才能正确等待操作完成：

<template>
  <YourChildComponent @method="handleParentMethod" />
</template>

<script setup>
const handleParentMethod = async (formData) => {
  // 模拟异步操作：比如接口请求、数据处理
  await new Promise(resolve => setTimeout(resolve, 1500));
  
  // 实际项目替换为业务逻辑，比如：
  // await $fetch('/api/your-endpoint', {
  //   method: 'POST',
  //   body: formData
  // });
};
</script>

关键注意事项 #

• 不能直接在@click里写$emit，必须封装成异步方法并await——Vue的$emit会返回父组件监听函数的返回值（如果是Promise的话）。
• 必须用try/catch/finally包裹逻辑，就算父组件操作抛出错误，finally块也会执行，避免按钮永久加载。
• 确认UButton的:loading绑定的是正确的isLoading变量。

内容的提问来源于stack exchange，提问作者Jay