Vue.js 2.0子组件向父组件触发事件失效问题求助

嘿，我看了你的代码，问题很明确——父组件没有监听子组件触发的confirmed事件！子组件已经正确通过this.$emit('confirmed')触发了事件，但父组件里的<ConfirmMessage>标签没有绑定对应的事件处理逻辑，所以自然没反应。

下面是修正后的代码，你可以直接参考：

子组件（无需改动，你的代码是对的） #

<template>
  <button @click="confirmSendMessage">Send</button>
</template>

<script>
export default {
  methods: {
    confirmSendMessage () {
      this.$emit('confirmed')
    }
  }
}
</script>

修改后的父组件 #

<template>
  <!-- 核心：在子组件标签上添加@confirmed监听，绑定父组件的处理方法 -->
  <ConfirmMessage @confirmed="handleConfirmed"/>
</template>

<script>
// 记得补全子组件的完整路径
import ConfirmMessage from './ConfirmMessage.vue'

export default {
  // Vue 2.0必须显式注册子组件才能使用
  components: {
    ConfirmMessage
  },
  methods: {
    handleConfirmed() {
      // 这里写你收到事件后要执行的逻辑
      console.log('收到子组件的确认事件啦！可以在这里处理发送消息的逻辑～')
    }
  }
}
</script>

关键注意点： #

• 父组件必须在子组件标签上通过@事件名="处理方法"的形式监听子组件触发的事件，事件名要和子组件$emit的完全一致（Vue 2里事件名不会自动转换大小写，别写错哦）
• 如果需要传递参数，子组件可以写成this.$emit('confirmed', 要传的参数)，父组件的处理方法就能接收：handleConfirmed(参数) { ... }

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