【Vue.js】イベントオブジェクトと任意の引数を同時に受け取る

<template>
  <!-- テンプレート側では何も渡さなくてOK -->
  <button @click="onClick">Click</button>
</template>

<script>
export default {
  methods: {
    onClick(event) {
      // 第１引数に自動的に入ってくる
      console.log(event)
    }
  }
}
</script>

<template>
  <!-- 任意の値を指定 -->
  <button @click="onClick(1)">Click</button>
</template>

<script>
export default {
  methods: {
    onClick(number) {
      console.log(number) // 1
    }
  }
}
</script>

<template>
  <!-- 　任意の引数と一緒に、通常のイベントオブジェクトも受け取れる。 -->
  <!-- 　その場合、「$event」という引数名にする。（「$event」は特別な引数名） -->
  <button @click="onClick(1, $event)">Click</button>
</template>

<script>
export default {
  methods: {
    onClick(number, event) {
      console.log(number) // 1
      console.log(event) // イベントオブジェクト
    }
  }
}
</script>