コンポーネントのイベントを定義するemits [Vue.js]

Vue.js The Progressive JavaScript Framework

今回は、コンポーネントに定義できるemitsオプションについて紹介します。

emitsオプション

Vue.jsのバージョン3では、コンポーネントのプロパティを表すpropsオプションと同様に、イベントを表すオプションとしてemitsが追加されました。

emitsオプションを使用することで、コンポーネントが親に発行できるイベントを定義することができます。

emitsオプションはコンポーネントから出力できるカスタムイベントのリスト(ハッシュ)です。
emitsオプションには、単純な配列ベースの構文と、イベントを検証できるオブジェクトベースの構文が利用できます。  

emitsオプションの構文

配列ベースの構文では、emitsオプションにイベント名を定義します。

オブジェクトベースの構文では、各プロパティの値にnull、または検証関数のいずれかを指定します。

検証関数は、$emitでイベントを発行する時に渡される引数を受け取ります。
例えば、this.$emit(‘click’, 0);が呼び出された場合は、clickイベントに対応する検証関数は引数に「0」を受け取ります。

emitsオプションと$attrsプロパティ

emitsオプションに宣言されていないイベントのリスナーは、コンポーネントの$attrsプロパティに含まれるようになります。
emitsオプションに宣言されているイベントのリスナーは、コンポーネントの$attrsプロパティには含まれず、除外されます。

Vue.js 入門 Tips 一覧