tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

MENU

【Vue.js】 メソッドイベントハンドリングで引数に event と任意の引数を渡す方法

やりたいこと

Vue.jsのtemplate言語ブロックでイベントハンドリングするときに、引数でeventとその他の引数もメソッドへ渡す必要性が出てきました。ですので、調査を行いました。

環境

  • Node.js v14.5.0
  • npm v6.14.6
  • Vue v2.6.11

方法

調べてみると以下の二通りの方法を見つけました。

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

サンプルコード

二つの方法を見つけたのでそれぞれに対してサンプルコードを作成して動かしてみることにしました。

$eventを利用する方式

@click="handler($event, foo)をbuttonタグに設定することで、イベントを損なわないまま、二つ目の引数を利用することができるようになります。

今回の場合はdataに定義されているfooというプロパティの中の文字列の'foo'がmethodsのhandler関数に渡ります。

$eventが急に現れましたが、このように書いておくことで、methodsのhandler関数の一つ目の引数でボタンをクリックすることのイベントを渡すことができます。

<template>
  <button @click="handler($event, foo)">押すたびにfooが渡る</button>
</template>

<script>
export default {
  data() {
    return {
      foo: 'foo'
    }
  },
  methods: {
    handler(event, foo) {
      console.log(event, foo)
    }
  }
}
</script>

ファイルを実行してブラウザで開いてみます。開発者ツールのコンソールを開きつつ、ボタンがあるので押してみるとMouseEvent"foo"という二つの変数が渡っていることが確認できます。

$eventを利用する方式
$eventを利用する方式

アロー関数方式

こちらの方式では、buttonタグに@click="e => handler(e, bar)"を設定しています。e => handler(e, bar)だけをいるとアロー関数式を定義していることがわかるかと思います。以下のような関数定義を似ているかと思います。

const @click = function (e) {
  return handler(e, bar)
}

ともかくこの方法を使うことでも、buttonをクリックした時に発生するイベントを変数として損なわないまま、barという変数もmethodsのhandler関数に渡すことができます。

<template>
  <button @click="e => handler(e, bar)">押すたびにbarが渡る</button>
</template>

<script>
export default {
  data() {
    return {
      bar: 'bar'
    }
  },
  methods: {
    handler (e, bar) {
      console.log(e, bar)
    }
  }
}
</script>

作成実行してみるとMouseEvent'bar'の二つの変数がmethodsのhandler関数に渡りconsoleのログとして表示されていることを確認することができます。

[アロー関数方式
アロー関数方式

どちらがいいの?

二つの方式を見つけましたが、どちらのがいいのでしょうか?気になると思います。私もそう思います。特にどちらがよいということも公式ドキュメントには載っていないので未知のままとなります。

しかし、$eventを利用する方式の方は、インラインステートメントハンドラとして公式ドキュメントにそれっぽく記入されているので、知名度的にニッチなアロー関数式を利用するのではなく、$eventを利用する方式を利用する方がいいのかもしれません。

参考

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:MIO
  • 発売日: 2018/05/29
  • メディア: Kindle版