Vue中子组件触发事件父组件未捕获问题排查

嗨，我来帮你排查这个问题～你之所以看不到控制台日志，核心原因是父组件没有在子组件的标签上绑定对应的test事件监听器，相当于子组件喊了一声，但父组件根本没在听，自然不会有响应。

核心修正点 #

Vue中子父组件的事件传递必须满足两个条件：

• 子组件通过this.$emit('事件名')触发事件（你这部分代码是正确的）
• 父组件在引用子组件时，必须在子组件标签上用@事件名="父组件处理方法"绑定监听逻辑

修正后的完整代码示例 #

子组件代码

Vue.component('child-component', {
  template: '<div>Child</div>',
  mounted() {
    this.$emit('test'); // 触发test事件
  },
  methods: {
    onClick: function() {
      this.$emit('test'); // 补全你未写完的方法内容
    }
  }
})

父组件代码

<div id="app">
  <!-- 关键：在这里添加@test绑定父组件的处理方法 -->
  <child-component @test="handleTest"></child-component>
</div>

new Vue({
  el: '#app',
  methods: {
    handleTest() {
      console.log('成功捕获到子组件的test事件！');
    }
  }
})

额外提醒 #

如果是Vue 3的场景，还需要在子组件的emits选项里声明自定义事件（比如emits: ['test']），但你用的是Vue.component，属于Vue 2的写法，不需要这一步。只要确保父组件绑定了对应的事件监听，就能正常捕获子组件触发的事件啦。

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