Vue 小技巧：在事件处理中同时接收子组件参数和父组件上下文变量

痛点

父组件监听子组件事件时，默认只能拿到子组件传来的参数：

<!-- 子组件抛出数量：this.$emit('change', 5) -->
<Child @change="handleChange" />

<script>
methods: {
  handleChange(newCount) {
    // 只能拿到 5，拿不到当前上下文的其他变量
  }
}
</script>

如果我想在事件触发时，既拿到子组件传的值，又拿到当前 v-for 的项，常规写法就行不通了。

招式：箭头函数包装

用箭头函数“拦截”子组件参数，并手动追加你想要的上下文变量：

<Child @change="(newCount) => handleChange(newCount, item)" />

完整 Demo

子组件：只管抛出修改后的数量

<button @click="$emit('change', count)">修改</button>

父组件：遍历商品列表，修改数量时需要知道是哪个商品

<div v-for="item in goodsList" :key="item.id">
  <!-- ✨ 核心写法 ✨ -->
  <Child @change="(newCount) => handleChange(newCount, item)" />
</div>

<script>
methods: {
  handleChange(newCount, goodsItem) {
    // 完美！既拿到了最新数量，又拿到了对应的商品对象
    goodsItem.count = newCount;
  }
}
</script>

原理一句话

Vue 会把子组件 $emit 抛出的值，作为箭头函数的实参传给 newCount；然后你手动调用 handleChange，把 newCount 和当前作用域的 item 一起塞进去。

本质上，就是你通过箭头函数接管了参数的传递过程。