Vue中使用$emit无法触发父组件事件，提交表单后父组件方法未执行

阿华AIGC实验室

2026-4-16

看起来你遇到的问题核心是父组件没有正确监听子组件发出的事件，另外还有异步请求的逻辑可以优化，下面一步步帮你解决：

1. 父组件未绑定子组件的事件监听

子组件已经通过emits声明了atualizar-lista-tarefas事件，也调用了this.$emit，但父组件App.vue里的<FormularioNovaTarefa>标签没有绑定对应的事件处理方法，导致父组件根本接收不到这个通知。

修改App.vue的模板和脚本：

<template>
  <!-- 关键：添加事件监听，对应子组件emit的事件名 -->
  <FormularioNovaTarefa @atualizar-lista-tarefas="atualizarListaTarefas"></FormularioNovaTarefa>

  <div>
    <ItemTarefa v-for="tarefa in tarefas" :key="tarefa.objetivo" :tarefa="tarefa" />
  </div>
</template>

<script>
import FormularioNovaTarefa from './components/FormularioNovaTarefa.vue'
import ItemTarefa from './components/ItemTarefa.vue'
import axios from 'axios'

export default {
  components: {
    FormularioNovaTarefa,
    ItemTarefa
  },
  data() {
    return {
      tarefas: []
    }
  },
  mounted() {
    // 初始化加载任务列表
    this.atualizarListaTarefas()
  },
  methods: {
    async atualizarListaTarefas() {
      // 实现获取最新任务列表的逻辑
      const response = await axios.get('http://localhost:5243/tarefas')
      this.tarefas = response.data
    }
  }
}
</script>

2. 优化子组件的异步请求逻辑

你当前的代码会在发起axios.post后立刻调用$emit，但axios请求是异步的，可能任务还没成功添加到后端，父组件就开始刷新列表了，导致数据不同步。应该把$emit放在请求成功的回调里：

修改子组件的adicionarTarefa方法：

<script>
import axios from "axios"

export default {
  data() {
    return {
      objetivo: ''
    }
  },
  emits: ['atualizar-lista-tarefas'],
  methods: {
    async adicionarTarefa() {
      const data = {
        objetivo: this.objetivo
      }

      try {
        // 等待请求成功后再通知父组件刷新
        await axios.post('http://localhost:5243/tarefas', data)
        this.$emit('atualizar-lista-tarefas')
        // 清空输入框，提升用户体验
        this.objetivo = ''
      } catch (error) {
        // 处理请求失败的情况，比如给用户提示
        console.error('添加任务失败:', error)
        alert('添加任务失败，请稍后重试')
      }
    }
  }
}
</script>