Vue.js Vue 2-在事件处理程序中接收事件参数和范围变量

在Vue 2中，我尝试使用一个自定义事件处理程序，它从组件接收参数并将当前索引（从

v-for

）作为参数接收

我已经找到了几种方法来实现这一点，但它们似乎都依赖于Vue的实现细节。下面是我正在尝试做的（注释掉的HTML也可以工作）：

Vue.component（'product'{
模板：“做有趣的事”，
方法：{
handleClick:function（）{
这个.$emit（'fun-stuff'，'foo'，'bar'）；
}
}
});
新Vue({
el:“#应用程序”，
数据：{
回调数据：“”，
项目：[1,2,3,4,5]，
消息：“你好，Vue！”
},
方法：{
handleFuntuff:function（）{
var argString=Array.prototype.join.call（参数“”）；
this.callbackData=this.message+'-'+argString；
}
}
});

{{message}}

{{callbackData}}

您应该将
索引
作为
道具
传递给组件


Vue.component（'product'{
模板：“做有趣的事”，
道具：['idx']，
方法：{
handleClick:函数（）{
this.$emit（'fun-stuff'，this.idx，'foo'，'bar'）；
}
}
});
新Vue({
el:“#应用程序”，
数据：{
回调数据：“”，
项目：[1,2,3,4,5]，
消息：“你好，Vue！”
},
方法：{
handleFuntuff:function（）{
var argString=Array.from（参数）.join（“”）；
this.callbackData=this.message+'-'+argString；
}
}
});

{{message}}

{{callbackData}}

另一种选择是使用特殊的

哎呀，我应该在我的问题中提到这一点。我知道这是一个选择，但我希望避免它。似乎该指数超出了该组件的关注范围？不过我怀疑这个答案是“正确的”。它是一个索引这一事实超出了组件的关注范围，但您希望组件能够单独识别，因此您必须为其提供一个标识符。我认为您的方法很好，而且是Vue实现这一点的方法。@CodinCat我有几种方法。你是指
函数（stuff，things）{handleFunStuff（index，stuff，things）}
还是
handleFunStuff（index，arguments[0]，arguments[1]）
方法？哦，我指的是突出显示的方法，它更容易阅读，孩子不需要知道索引