vueのメソッドイベントハンドリングで引数にeventと任意の引数を渡す

やりたいこと

vueのtemplateでイベントハンドリングするときに、引数でeventとその他の引数もメソッドへ渡したい。

方法

自分は以下の二通りを見つけた。

<button @click="handler($event, foo)"></button>
<button @click="e => { handler(e, foo) }"></button>

サンプル index.vue

<template>
  <button @click="handler($event, foo)"></button>
</template>

<script>
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
  methods: {
    handler (event, foo) {
       console.log(event, foo)
    }
  }
}
</script>
<template>
  <div>
    <ul>
      <li v-for="(word, index) of words" :key="index"
        @click="e => { handler(e, word) }">
        {{ word }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: ['a', 'd', 'c', 'd', 'e']
    }
  },
  methods: {
    handler (e, word) {
      console.log(e, word)
    }
  }
}
</script>