VueのEmitを用いて親と子のコンポーネント間でデータを受け渡す方法！

皆さんは、VueというWebサービスを利用したことはありますか。Vueとは、Web上で動作するアプリケーションのインターフェースというものを構築するためのWebサービスであり、多くの人が利用しています。

ここでは、VueのEmitコンポーネントと呼ばれるものについて詳しく解説していきます。Emitコンポーネントの親子関係や、Emitコンポーネントでのデータを受け渡すなど、多くのものが存在しています。

Vueでは、コンポーネントというものが非常に重要な役割を果たします。コンポーネントとは、Webアプリケーションを作成する際のユーザーインターフェイスや機能などをまとめることで、より構築しやすくするための仕組みのことを言います。

ここでは、最初にコンポーネントの基礎知識として、コンポーネントの2種類の配置について解説していきます。コンポーネントには、グローバル配置と、ローカル配置という二つの配置に分けられるようになっています。

まずグローバル配置とは、この配置のコンポーネントは全てのコンポーネント内で使えるようになっているというものです。グローバル配置のコンポーネントでは、propsなとのデータオプションも利用できます。

ローカル配置のコンポーネントとは、この配置のコンポーネントは利用先のコンポーネントのオプションで設定が必要な配置のことです。このため、特定のコンポーネントでのみ使えるようにできます。

Vueで使うコンポーネントには、親子関係というものが存在しています。Vueにおけるコンポーネントの親子関係とは、いったいどのようなものなのでしょうか。ここからは、コンポーネントの親子関係について解説していきます。

例えば、とあるコンポーネント内にもう一つのコンポーネントを取り込んで使った場合には、取り込まれたコンポーネント1は子、取り込んだコンポーネント2は親という扱いとなっています。Vueでは、コンポーネントにこのような親子関係があります。

Vueでは、コンポーネントの中でコンポーネントを使用した場合にコンポーネントの親子関係が成り立ちます。Vueで親子関係となっているコンポーネントでは、propsなどが利用できます。

例えば、propsを使用することで親子関係にあるコンポーネントの間でデータを受け渡すことができるようになっています。propsを使ったデータを受け渡すことについては次で解説します。

先程説明したように、Vueでは親子関係にあるコンポーネントにおいては、propsという方法を用いることでデータを受け渡すことが可能となっています。そのため、親子関係とpropsの使用方法はVueにとって重要な機能の一つとなっています。

では、実際にpropsを使うことで親子関係にあるコンポーネントでデータを受け渡す方法とは、いったいどのようなものなのでしょうか。ここからは、propsでデータを受け渡すための方法について解説していきます。

例えば「message:hello.」となっているデータを親が持っている場合、どのようにして子へとデータを受け渡すかと言うと、データバインディングでコードを設定して受け渡すことをします。

このデータを受け取る側となっている子のコンポーネントでは、「props」から始まるpropsオプションというコードを書く必要があります。propsオプションによって受け取るデータを定義します。

Vueを使用する場合において、Emitコンポーネントと呼ばれるコンポーネントは非常に重要な役割を果たします。では、VueにおけるEmitコンポーネントとは、いったいどのようなものなのでしょうか。

ここからは、VueでのEmitコンポーネントについての説明と、Emitコンポーネントにイベントの通知をするための方法について解説していきます。Emitコンポーネントを知って、Vueをより良く使いこなしましょう。

まず、Emitコンポーネントについて説明します。Emitコンポーネントとはどのようなものなのかというと、コンポーネントに「$Emit」というコードが付けられたものをEmitコンポーネントと呼びます。

Emitコンポーネントを利用することでVueにおけるイベントの通知を管理できるようになっています。ここからは、VueにおけるEmitコンポーネントの使用方法や、その詳細などについて解説していきます。

VueでのEmitコンポーネントの使用方法について解説する前に、この説明をする際のブラウザ環境について解説していきます。VueでEmitコンポーネントを利用する際の推奨ブラウザは、Firefox Quantumです。

また、その他の環境ですが、PCはMac OS 10.12、Nodeは9.3.0、npmは5.5.1、Vueは2.5となっています。Emitコンポーネントを有効活用する場合、このような環境をあらかじめ作っておきましょう。

Vueのコンポーネントを利用する場合は、最初に環境構築ということをしてください。環境構築をしておかないと、Vueでコンポーネントを利用できず、Emitコンポーネントの利用もできなくなってしまうためです。

環境構築の際に特に重要なことが、「npm install」というコードを使ってnpmをインストールすることです。これで先程解説した5.5.1のnpmを使えるようになります。忘れずに実行しておきましょう。

では、ここからは実際に$Emitを利用してイベントの通知をしてみましょう。$EmitはVueにとってカスタム要素である発行イベントという意味です。$Emitという文字は、コンポーネントの前に置くことで使用可能です。

Vueにおける$Emitには、発行イベントの中でも少し特殊な定義となっています。それはいったいどのようなものなのでしょうか。次では$Emitのイベント定義について詳しく解説していきます。

では、$Emitはいったいどのようなイベント定義となっているものなのでしょうか。Vueには、submitやクリックした時に動作するclickなど、既存のイベントというものが存在しており、@を付けることでVueのイベントとして使えるようになっています。

しかし、$Emitを使った場合は、既存のイベントだけでなく、独自でイベントの定義を扱えるようになっているのです。そのため$Emitを使ったイベント定義は、非常に便利です。

では、実際に$Emitを使ったイベントを発行するコンポーネントの作り方について解説していきます。ここでは例として、ボタンを押すとイベントを発行する「EventButton」というコンポーネントを利用します。

このとき$Emitは一つ以上の引数を持っています。この時の一つ目の引数はそのイベントの名前を表しています。例えば一つ目の引数に「event」と入力すると、そのイベント名はeventになるのです。二つ目より先の引数については、少し後で説明します。

では、次にイベントにおける購読について解説していきます。Vueでイベントの購読のコードを書く時には、前の手順で発行したイベント名を@の後に続けて入力し、その先にイベントパンドラ名というものを入力します。

つまり、イベントの購読コードは「<コンポーネント名 @イベント名=″イベントパンドラ名″></コンポーネント名>」というような書式で入力することになっています。また、@イベント名は発行したイベントの一つ目の引数に一致している必要があります。

では、$Emitによるイベント発行とは、詳しく見ていくとどのようなことになっているのでしょうか。ここからは、Vueにおける$Emitコンポーネントの詳細について紹介していきます。

$Emitとは、Vueインスタンスに定義されたメソッドというものです。そして、先程説明したように、一つ以上の引数を必ず持つようになっています。この引数と発行したイベントを有効活用することで、$Emitを活用できます。

これより前に、一つ目の引数がイベント名を表すことは説明しましたが、二つ目以降の引数はどのようなものなのでしょうか。二つ目以降の引数は、イベントパンドラへと受け渡すための引数を定義するものとなっています。

例えば「$Emit(′event2′,′hello′)」という二つ目の構文の場合は、event2というイベント名のイベントを発行しており、helloという引数をイベントパンドラへと受け渡すようになっています。

受け渡す引数の数が一つのイベントについて一つとは限りません。では、いったいどのような構文の時に複数の引数をイベントパンドラへと受け渡せるようになっているのでしょうか。それは、{}で二つ目の受け渡す引数を定義することです。

例えば「$Emit('event3','welcome', {name:'one'}」という構文の場合は、event3という名前のイベントで、welcomeという引数を渡し、{name:'one'}というオブジェクトも引数として受け渡しています。

ここまでは、イベントを単純に発行したりイベントパンドラへの引数の受け渡しをしただけですが、その仕組みを利用してゲームを作るには、いったいどのようにすれば良いのでしょうか。ここからは、Vueで数当てゲームを作る方法について解説していきます。

VueのEmitコンポーネントを利用することで、色々なWebアプリケーションを制作できるようになるため、Webアプリケーション制作の幅が広がります。数当てゲームで実際にWebアプリケーションを作ってみましょう。

今回制作する数当てゲームのルールについては次のようになっています。まずは、1から100までの整数のうち、ランダムに整数が選ばれます。そして、その整数がどれかを当てるというルールです。

もし答えが外れていたら、答えが予想より大きいか小さいかを教えます。そして、10回で数が当てられなかった場合は負けとなるゲームです。Emitコンポーネントは、答えが大きいか小さいかの通知や、負けかどうかの通知などに利用します。

では、数当てゲームのコードの中で重要な役割となっているEmitコンポーネントについて解説していきます。まずは、当たり外れの通知をする$Emitについてです。「if(this.answer===this.num)」で「当たっている時」という条件の意味です。

「===」の部分を「>」などにすることで、大きいか小さいかについても定義できます。同じように残り回数の変数が0の時と条件を定義して、それぞれのイベントを発行すればそれらの通知ができます。

では、$Emitの仕組みについて理解した所で、少し応用例を紹介します。Vueではvm.$Emitという方法を使うことで、親から子へのデータ受け渡しだけでなく、子から親へのデータを受け渡す方法が使えるようになっています。

ここからは、vm.$Emitという方法を利用して子から親へデータを受け渡す方法を紹介していきます。

先程説明したように、親子関係にあるコンポーネントでは、子から親へのデータ受け渡しもできるようになっています。では、どのような仕組みで子から親へのデータ受け渡しができるようになっているのでしょうか。

それは、$Emitのカスタムイベントを発行することで、親のコンポーネント側がそれを受け取ってメソッドを実行してくれるようにする仕組みです。その受け渡しのために使うコードについては次で解説していきます。

では、子から親へのデータ受け渡しのコードについて解説していきます。「template: '<button @click="method"></button>',」という構文では、親のメソッドを呼び出すための構文です。

また、そのコードの直後に$Emitでeventを発行させます。そして「template: '<b-component @event="method2"/>',」というコードで受け取ったデータでmethod2が実行されます。

以上がVueでのコンポーネントについての解説です。$Emitや親子コンポーネント間でのデータ受け渡しを利用することで、より高度なWebアプリケーションを制作できるようになるため、ぜひマスターしておきましょう。