Vue.js の基本 (10)

前回、プロパティを使用することでコンポーネントへ値を渡せることを確認しました。

しかし場合によっては、コンポーネントから親側へデータを渡したい場合もあるはずです。
その場合は、カスタムイベントを使用します。

普通の input タグの場合、値が変化すると change イベントが発生します。change イベントをハンドリングするには、addEventListener や jQuery であれば on などを使用してそのイベントが発生したときにコールバックされる関数を登録します。

コンポーネントでは、このようなイベントを任意に発生させることができます。これがカスタムイベントです。

シンプルに input タグをコンポーネントにしています。このコンポーネントは、input タグの値を data の value とバインドしています。
さらに、その value をウォッチし、value の長さが 5 を超えた場合に、this.$emit(‘my-event’, this.value); を行っています。これがカスタムイベントの発行になります。
ここでは my-event というイベントを発行し、その引数として value を渡しています。

これをハンドリングする側が、 の v-on:my-event です。これにより、my-input コンポーネントで my-event が発生したら、onMyEvent が呼び出されるというわけです。

このように、コンポーネントではプロパティとカスタムイベントを使用して親とデータのやり取りを行います。