tomatoaiu の Tech Blog

やりたいこと

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

やりたいこと
環境
方法
サンプルコード
- $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"という二つの変数が渡っていることが確認できます。

アロー関数方式

こちらの方式では、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>