Vue中如何给一个自带默认参数的事件传入第三方参数

今天在uniapp的一个商城练手项目中碰到的问题，我相信这也是困扰过前端朋友们的问题之一，话不多说直接看场景

这是一行uniapp自带的组件结构代码：

 <!-- 商品数量 -->
<uni-number-box :min="1" :value="item.goods_count" @change="numberChange"></uni-number-box>

对应渲染图中的红色框区域：

当我点击+或者-后会触发组件中自带的change事件，而这个事件自带一个参数value,也就是图中商品数量更改后的新值，但是呢，只更改红色框中的数量是毫无意义的，这个商品的实际存储的数量数据是没有任何变化的，还是1。那么我们就需要拿到当前数量更改的商品对象，由于我这里是用v-for渲染的，每一个商品对象对应的是item,拿到item数据后才能进一步的更改当前商品的数量数据。但是这个change事件已经默认注入了一个参数value,我们怎么才能传入我们想要的item参数呢？

问题总结

因此，在有一个自带默认参数的事件中传入我们想要的item参数（第三方参数）成为了要现在要解决的问题。

解决办法：使用箭头函数传递事件

这里我们将change事件函数这样写：

@change="(value)=>numberChange(value,item)"

其中，value是默认参数，item是我们想要的传入的第三方参数。

我们在methods中定义此函数：

 methods: {
      //商品数量改变事件
      numChange(value,item){
        console.log(value,item);
      }
    }

看看打印出来的效果：

数量2即为改变后的新值，蓝色框中的对象即为我们想拿到的商品对象，至此这个问题解决，可以进行后面的操作！

github项目源码：https://github.com/JwfCarry/uniapp-shop