概要

以下のような感じのイベントを発生させるコンポーネントを作ったのですが
そのイベント発生時に追加で引数を渡す必要が出てきたので、調べて実装してみました。

コンポーネント（/components/Hoge.vue）

<template>
  <div>
    <p>{{ value }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  methods: {
    increment() {
      this.$emit('input', value + 1)
    },
  },
}
</script>

使う側

<template>
  <div>
    <!-- ここで handleIncrementedに引数を渡したい -->
    <hoge v-model="num" @input="handleIncremented"></hoge>
  </div>
</template>

<script>
import Hoge from '@/components/Hoge.vue'
export default {
  components: {
    Hoge,
  },
  data() {
    return {
      num: 1,
    }
  },
  methods: {
    handleIncremented() {
      // TODO
    },
  },
}
</script>

やったこと

こちらに解決策が書いてありました。

$event という引数を第一引数に渡してあげれば良いようでした。

<template>
  <div>
    <!-- ここで handleIncrementedに引数を渡したい -->
    <hoge v-model="num" @input="handleIncremented($event, 'param1', 'param2')"></hoge>
  </div>
</template>

<script>
import Hoge from '@/components/Hoge.vue'
export default {
  components: {
    Hoge,
  },
  data() {
    return {
      num: 1,
    }
  },
  methods: {
    handleIncremented(event, param1, param2) {
      console.log(`new_num: ${event}, param1: ${param1}, param2: ${param2}`)
      // "new_num: 2, param1: param1, param2: param2"
    },
  },
}

以上です。