v-for 内的闭包，属性插值答案

【问题标题】：closure within v-for, attribute interpolationv-for 内的闭包，属性插值
【发布时间】：2025-11-22 12:00:02
【问题描述】：

我有这个基本设置

<div v-for="n in 4">
  <some-component @on-some-event="onSomeEvent(n)"></some-component>
</div>

on-some-event 在some-component 内调度。但我需要知道这些组件中的哪些发送了消息。使用上面的设置，只有n 被传递到方法中。并且事件发送的数据无处可去。

我想对函数进行插值，使方法看起来像这样

onSomeEvent(n){
  return (obj)=>{
    console.log(`component ${n} sent ${obj}`);
  };
}

但是用{{}} 包裹onSomeEvent 会引发警告：attribute interpolation is not allowed in Vue.js directives and special attributes.

我可以将n 索引传递给组件，但这似乎不太优雅，因为我可能无法修改some-component

我对 Vue 有点陌生，所以也许我缺少这类东西的一些核心功能？

【问题讨论】：

标签： vue.js

【解决方案1】：

<div v-for="n in 4">
  <some-component @on-some-event="onSomeEvent | pass n"></some-component>
</div>

....
filters: {
   pass(handler, n) {
       return function() {
           handler()(n, ...arguments)
       }
   }
},
methods: {
   onSomeEvent() {
       console.log(...arguments)  
   }
}

https://jsfiddle.net/2s6hqcy5/2/

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案2】：

您没有错过任何内容，消息是正确的，在 Vue 中，您将无法使用这样的插值。 http://vuejs.org/guide/syntax.html#Interpolations

但是，您可能希望更改管理事件和在组件之间传递数据的方式。在您的示例中，您可以像这样绑定数据：

<div v-for="n in 4">
    <some-component :n="n"></some-component>
</div>

在你的组件中，声明prop：

Vue.component('some-component', {
  props: ['n'],
  ...

现在，在每个组件中，n 与任何其他属性 (http://vuejs.org/guide/components.html#Props) 一样可用。

然后在调度你的事件时，你可以这样调用它，不需要参数：

onSomeEvent()

关于活动本身，您可以访问n：

console.log('Component' + this.n + ...)

https://jsfiddle.net/crabbly/mjnjy1jt/

【讨论】：