Vue子组件emit事件触发成功但父组件监听无响应问题求助

问题根因 #

你当前的事件绑定逻辑存在明显的位置错误：

• 触发modifySelected事件的子组件是<CollectionItemCard>
• 但你将@modifySelected的事件监听绑定到了<CollectionFooter>组件上，两个组件相互独立，父组件自然无法接收来自<CollectionItemCard>的事件。

解决方案 #

根据你的组件嵌套逻辑选择对应处理方式：

1. 如果<CollectionItemCard>是<Collection>的直接子组件
   直接把事件监听绑定到<CollectionItemCard>标签上即可，同时建议将camelCase的事件名改为kebab-case（HTML不区分大小写，避免匹配失效），修改后写法如下：

<!-- Collection 父组件内 -->
<CollectionItemCard 
  <!-- 原有props配置 -->
  @modify-selected="modifyItemsSelected"
/>

这里不需要手动传operation参数，Vue会自动把$emit携带的参数注入到处理函数中。

2. 如果<CollectionItemCard>是嵌套在<CollectionFooter>内部的子组件
   需要做一层事件透传：
   首先在<CollectionFooter>组件内绑定监听<CollectionItemCard>的事件，再向上转发给父组件：

<!-- CollectionFooter 组件内 -->
<CollectionItemCard 
  <!-- 原有props配置 -->
  @modify-selected="e => $emit('modify-selected', e)"
/>

然后再在<Collection>组件内给<CollectionFooter>绑定事件监听即可。

额外说明 #

你完全不需要为这个需求引入Vuex，该问题属于事件绑定逻辑错误，使用Vue原生自定义事件即可正常实现功能，不会产生冗余代码。

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