批評Vue.jsのコンポーネント入門[props][$emit]2019年2月22日JavaScriptVue.jsにおけるコンポーネントの概要と、親子構造におけるデータ通信等の説明をしてみます。ヘッダーやフッター、そして検索フォームなどの共通するUIや機能をまとめ、アプリケーションを効率良く構築することを目指したのが「コンポーネント」と呼ばれる仕組みです。ヘッダーに検索フォームといったように、コンポーネントは別のコンポーネント内に配置することも可能です。概要をつかむために、まずはCDNによる1ファイルで説明します。コンポーネントの配置コンポーネントは主に「グローバル配置」「ローカル配置」の2つに分けられます。グローバル配置されたコンポーネントは、すべてのコンポーネント内で利用することができます。グローバル配置ではVue.componentを利用します。第1引数で「my-component-name」という名前のコンポーネントを登録しています。第2引数でtemplateオプション等を持つオブジェクトを設定します。このオブジェクト自体がコンポーネントとなります。computed、後述するpropsなどがあります。実際にコンポーネントのtemplateオプションで定義した内容が表示される部分です。このタグをカスタムタグと呼びます。下記コードが「ローカル配置」となります。myComponentName}})</script></body></html>28〜30行目グローバル配置と違い、作成したオブジェクトは利用先のcomponentsオプションで定義する必要があります。id=”app”>〜</div>内(elオプションが#appを設定)でのみ有効となるローカル配置となります。後述しますが、上記においてルートVueインスタンスを親、myComponentNameは子の関係にあると言います。コンポーネントの親子関係ある任意のコンポーネントを取り込み利用した場合に、そのコンポーネント自体を子、利用した先は親という関係になります。この関係を端的に表したのが下図です。AコンポーネントはBコンポーネントを利用しています。上記の関係を、コードで表現すると下記のようになります。/>)を利用しています。Bコンポーネントを利用するために、25行目においてbComponentを定義しています。「コンポーネントの配置」の項目でも述べましたが、上記コードにおいて、ルートVueインスタンスはAコンポーネントの親という関係も成り立ちます。コンポーネント間の通信、親から子へ(props)次にコンポーネント間においてのデータのやり取りを説明していきます。親コンポーネントから子コンポーネントへは、propsを利用してデータを渡します。‘こんにちわ’」というデータを子へ渡してみます。aComponent}})</script></body></html>以下流れに沿って説明していきます。親であるAコンポーネントの持つ「message」データです。子コンポーネント(b-component)へは属性で渡します。データバインディングで設定します。子であるBコンポーネントでは、親から受け取るデータはpropsオプション※1内で定義する必要があります。テンプレート内(18行目)において{{myMessage}}のように記述し表示させます。propsについて:実際には配列ではなくオブジェクトにして、下記のように受け取る型を指定するなどの設定をおこないます。本記事では説明しません。String}子から親へ($emitとカスタムイベント)同様に、親子関係を持つAコンポーネント(親)とBコンポーネント(子)において、子コンポーネントで発生するイベントから親コンポーネント側のメソッドを実行してみます。aComponent}})</script></body></html>19行目@clickは、v-on:clickと同じです。子コンポーネント側のボタンをクリックすると、this.$emit(‘b-event’)でカスタムイベントであるb-eventが発火し、親側でそのb-eventをキャッチします(30行目)。子コンポーネント側で$emit(‘カスタムイベント’)が発火すると、親コンポーネント側では「@カスタムイベント」で発火をキャッチ、それに紐付いたメソッドが実行される仕組みです。$emitの第2引数に、親コンポーネントに渡すデータを指定することもできます。3によって生成された実際のプロジェクトで見てみます。プロジェクトの作成に関しては下記の関連ページをご覧下さい。3によって生成されたデフォルトのファイル群となります。Home.vuesrc>componentsディレクトリ内にHelloWorld.vueがありますが、これがいわば部品として利用されているコンポーネントです。実際にはHome.vue内で利用されています。Home.vueファイルは下記のように記述されています。{HelloWorld}}</script>10行目でHelloWorld.vueを取り込み、このコンポーネントを利用するために自身のcomponentsオプション(15行目)で定義しています。/>タグを記述し、子コンポーネントであるHelloWorld.vue(のtemplate)を表示させています(4行目)。App”が指定されています。これは子コンポーネントに対してデータを送っています。下記コードが子であるHelloWorld.vueですが、10〜12行目のpropsオプションにおいて、親から渡されるmsgを定義しています。