uniapp（vue）在v-for中组件的事件中添加自己的参数

原创已于 2022-04-16 16:22:15 修改 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #uniapp #v-for #事件 #ts

于 2022-04-16 16:21:33 首次发布

前端专栏收录该内容

46 篇文章

订阅专栏

在HTML中使用循环展示列表数据时，常常遇到事件回调中定位具体数据的问题。本文通过举例说明如何在购物车应用中使用uni-number-box组件，并在change事件中传递商品对象，确保正确修改对应商品的数量。通过在事件处理函数中包裹一层方法，将商品对象作为参数传入，实现了事件触发时对正确数据的修改，解决了循环组件回调的困扰。

在html中给我们经常会因为数据是列表而需要用循环来展示数据。而其中有些组件是有回调事件的。这时候循环中如何知道是哪个数据在触发事件就是很重要的事，否则无法修改对应的数据。

举个例子，我们在购物车中需要用到uni-number-box去修改数量，购物车的商品肯定是用循环生成的。每个商品对应着一个uni-number-box。但是uni-number-box的change事件仅仅只返回当前数量的值。在代码中我们并不知道去给具体哪个商品修改数据：
在这里插入图片描述
而我们在v-for中，可以有列表的下标，甚至是直接拿数据对象作为参数传给我们的事件函数，这样我们才知道去修改具体哪个商品的数量：

    // 加减数量的事件
    function numberBox(value: number, goods: iCartGoods) {
        goods.num = value;
    }

value是组件提供的，goods是我们的具体商品对象。所以我们得在事件中再包裹一层方法：

 @change="($value:number) => { numberBox($value, goodsItem);}"

uni-number-box的change事件就这样写，就可以把我们想要的参数goodsItem传进来了。