Vue.js中如何在$emit时传递额外参数（v-for场景）

当通过v-for循环数组生成多个ProductEntry子组件时，需要在父组件捕获子组件自定义$emit事件的同时，拿到对应循环项（product对象）和emit传递的所有参数，从而修改productList中的对应项。

初始代码 #

父组件

<ProductEntry 
    @update-price="updatePrice" 
    v-for="product in productList"
        :product-description="product.description"
        :product-amount="product.amount"
        :product-price="product.price">
</ProductEntry>

子组件

<GrowingTextArea id="priceCol" @input-update="updatePrice" />

解决方案 #

通过$event获取子组件emit传递的参数，再将当前循环的product对象作为额外参数传入处理函数：

<ProductEntry 
    @update-price="updatePrice($event, product)" 
    v-for="product in productList"
        :product-description="product.description"
        :product-amount="product.amount"
        :product-price="product.price">
</ProductEntry>

在父组件的处理方法中，就能同时接收emit参数和对应product对象，进而修改productList：

// 父组件方法示例
updatePrice(newPrice, product) {
  const targetItem = this.productList.find(item => item.id === product.id)
  if (targetItem) {
    targetItem.price = newPrice
  }
}

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