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

Question

在Vue 2中，我试图使用一个自定义事件处理程序，它接收来自组件的参数，而接收当前索引（来自v-for）作为参数。

我找到了几种方法（帽子提示到Vue 2 arguments in inline (in-template) event handler），但它们似乎都依赖于Vue的实现细节。这是我正在尝试做的事情（注释掉的HTML也有效）：

Vue.component('product', {
  template: '<button @click="handleClick">Do Fun Stuff</button>',
  methods: {
    handleClick: function() {
      this.$emit('fun-stuff', 'foo', 'bar');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    callbackData: '',
    items: [1, 2, 3, 4, 5],
    message: 'Hello Vue!'
  },
  methods: {
    handleFunStuff: function() {
      var argString = Array.prototype.join.call(arguments, ' ');
      this.callbackData = this.message + ' - ' + argString;
    }
  }
});

<div id="app">
  <p>{{message}}</p>
  <template v-for="(i, index) in items">
    <product @fun-stuff="function(stuff, things) { handleFunStuff(index, stuff, things) }">
    </product>
    <!--
      <product @fun-stuff="handleFunStuff(index, arguments[0], arguments[1])">
      </product>
      -->
    <!--
      <product @fun-stuff="handleFunStuff.bind(null, index).apply(null, arguments)">
      </product>
      -->
  </template>
  <p>{{callbackData}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

在Vue中有更合适的方法吗？

来自Angular 1，这是可能的（因为组件回调参数被命名）和（根据我的经验）常用。

Answer 1

您应该将index作为prop传递给组件。

Vue.component('product', {
  template: '<button @click="handleClick">Do Fun Stuff</button>',
  props: ['idx'],
  methods: {
    handleClick: function () {
      this.$emit('fun-stuff', this.idx, 'foo', 'bar');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    callbackData: '',
    items: [1, 2, 3, 4, 5],
    message: 'Hello Vue!'
  },
  methods: {
    handleFunStuff: function() {
      var argString = Array.from(arguments).join(' ');
      this.callbackData = this.message + ' - ' + argString;
    }
  }
});

<div id="app">
  <p>{{message}}</p>
  <template v-for="(i, index) in items">
    <product :idx=index @fun-stuff="handleFunStuff">
    </product>
  </template>
  <p>{{callbackData}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

Answer 2

另一个选择是使用特殊$event argument.

Here's a Codesandbox showing it in action.