Vue.js子组件向父组件传事件失效求助（SFC场景）

你的问题核心很清晰：父组件把事件监听绑错了位置——你把change-view事件的监听加到了外层包裹的<div>上，但这个<div>并不是子组件的实例，根本接收不到子组件抛出的事件。

错误原因拆解 #

在Vue中，子组件通过$emit触发的事件，必须由父组件中对应的子组件标签来监听。你当前在App.vue里把v-on:change-view="updateView"绑在了<div>上，而实际渲染子组件的是<component>标签，所以事件完全没被捕获到。

修正后的代码 #

App.vue（父组件）

<template>
  <div>
    <!-- 把事件监听绑定到动态组件标签上 -->
    <component 
      v-bind:is="currentView" 
      v-on:change-view="updateView"
    ></component>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      currentView: 'Modal'
    }
  },
  methods: {
    updateView (view) {
      console.log('event listener!!!')
      this.currentView = view;
    }
  }
}
</script>

Modal.vue（子组件）

你的子组件代码完全没问题，$emit('change-view', 'Purposes')的写法符合Vue规范，不需要修改。点击"More Information"按钮时，事件会正常抛出。

验证说明 #

修正后，当你点击子组件的按钮，子组件抛出的change-view事件会被父组件的<component>标签捕获，触发updateView方法，currentView更新后动态组件就会切换到指定视图。你之前手动更新数据正常，也说明视图切换的逻辑是对的，只是事件绑定位置错了而已。

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