Vue组件$emit事件未被监听器捕获问题求助

核心问题 #

你把自定义事件监听挂在了v-for循环的外层div上，而不是子组件<CategoryWrapper>标签上，导致子组件通过$emit触发的事件根本没被父组件捕获到。

第一步：修复事件监听位置 #

修改父组件index.vue的模板，将@listen-button-event移到<CategoryWrapper>组件上：

<div
  v-for="(filteredArticles, categoryKey) in groupedCategories"
  :key="categoryKey"
  class="l"
>
  <CategoryWrapper :title="categoryKey" @listen-button-event="toggle" />
</div>

第二步：处理激活状态的逻辑（可选优化） #

当前代码里父组件和子组件各有一个isActive，会导致状态混乱，根据场景选择以下方案：

方案1：子组件独立管理状态（简单场景）

保持子组件自身的isActive数据，父组件的toggle方法可保留用于调试或全局响应（比如你当前的alert和console输出），子组件代码无需额外修改。

方案2：父组件统一管理状态（推荐，多组件同步场景）

父组件维护所有分类的激活状态，通过props传递给子组件：

1. 父组件index.vue修改：

data() {
  return {
    activeCategories: {} // 用对象存储每个分类的激活状态
  }
},
methods: {
  toggle(categoryKey) {
    this.activeCategories[categoryKey] = !this.activeCategories[categoryKey]
    alert('I did something')
    console.log('ping')
  }
}

模板修改：

<CategoryWrapper 
  :title="categoryKey" 
  :is-active="activeCategories[categoryKey]"
  @listen-button-event="() => toggle(categoryKey)" 
/>

2. 子组件修改，通过props接收激活状态：

props: {
  title: String,
  isActive: Boolean
},
// 删除子组件自身的isActive data
methods: {
  changeComponent () {
    this.$emit('listenButtonEvent')
  }
}

模板的class绑定保持不变：

<div
  :class="{ active: isActive }"
  @click="changeComponent()"
>
  <a>{{ title }}</a>
</div>

修改完成后，点击子组件标题即可触发切换逻辑，实现激活状态的正常切换。

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