Vue子组件$emit事件后，父组件如何动态获取对应列表项与所属列表

首先明确：不需要强制让子组件透传所有父组件侧的上下文，Vue 的事件绑定机制完全支持在父组件渲染阶段，把当前遍历作用域的上下文手动传入事件处理方法，同时完全可以避免硬编码引用 this.apples/this.oranges 做归属判断的问题。

具体实现方式 #

• 直接调整事件绑定的写法，把 @clicked="eventHandler" 改成内联箭头函数的形式：先接住子组件$emit抛出来的参数，再把当前v-for遍历作用域下的item、index、所属列表标识一起作为参数传给eventHandler。
  示例代码：

<!-- 渲染apples列表的Child -->
<Child
  v-for="(item, index) in apples"
  :item="item"
  :index="index"
  :key="item.id"
  @clicked="(childEmitVal) => eventHandler(childEmitVal, item, index, 'apples')"
/>

<!-- 渲染oranges列表的Child -->
<Child
  v-for="(item, index) in oranges"
  :item="item"
  :index="index"
  :key="item.id"
  @clicked="(childEmitVal) => eventHandler(childEmitVal, item, index, 'oranges')"
/>

• 对应的eventHandler方法可以直接拿到所有需要的上下文，不需要做任何硬编码的列表归属判断：

methods: {
  eventHandler(childEmitVal, currentItem, currentIndex, listType) {
    // 直接获取当前触发事件的列表项：currentItem
    // 直接获取事件所属列表的标识：listType
    // 子组件原本抛出的业务参数：childEmitVal
  }
}

关于上下文传递的核心疑问解答 #

是不是所有上下文都需要从子组件侧显式传递给事件处理方法？
完全不需要。子组件的职责只需要抛出自己内部产生的业务参数（比如示例中的'foo'），父组件遍历渲染时的列表上下文（当前item、索引、所属列表标识）属于父组件自己的渲染作用域，完全不需要透传给子组件再让子组件回传——这种透传方式是冗余的，会额外增加子组件的props复杂度。

进一步优化、避免硬编码列表标识的写法 #

如果不想在绑定事件时手动写'apples'/'oranges'这类字符串标识，可以把两个列表封装为带类型属性的数据源数组，统一遍历渲染：

data() {
  return {
    listGroups: [
      { listKey: 'apples', items: this.apples },
      { listKey: 'oranges', items: this.oranges }
    ]
  }
}

<template v-for="group in listGroups">
  <Child
    v-for="(item, index) in group.items"
    :item="item"
    :index="index"
    :key="item.id"
    @clicked="(childEmitVal) => eventHandler(childEmitVal, item, index, group.listKey)"
  />
</template>

这种写法后续新增列表时，只需要往listGroups数组里追加配置即可，不需要修改事件绑定逻辑。

常见踩坑提醒 #

• 不要直接写@clicked="eventHandler(item, index)"，这种写法会让Vue把传入的item、index当成事件回调的形参，把子组件$emit抛出的val挤到形参列表最后面，容易出现参数顺序错乱。
• 不要为了拿上下文给子组件加额外的listType props，本质上这部分逻辑是父组件的渲染职责，没必要侵入子组件的实现。

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