Vue.jsのコンポーネント入門[props][$emit]

2019年2月22日

Vue.jsにおけるコンポーネントの概要と、親子構造におけるデータ通信等の説明をしてみます。

 

ヘッダーやフッター、そして検索フォームなどの共通するUIや機能をまとめ、アプリケーションを効率良く構築することを目指したのが「コンポーネント」と呼ばれる仕組みです。ヘッダーに検索フォームといったように、コンポーネントは別のコンポーネント内に配置することも可能です。

 

 

概要をつかむために、まずはCDNによる1ファイルで説明します。

 

 

 

コンポーネントの配置


 

コンポーネントは主に「グローバル配置」「ローカル配置」の2つに分けられます。

 

グローバル配置されたコンポーネントは、すべてのコンポーネント内で利用することができます。

 

グローバル配置ではVue.componentを利用します。

17〜26行目

第1引数で「my-component-name」という名前のコンポーネントを登録しています。第2引数でtemplateオプション等を持つオブジェクトを設定します。このオブジェクト自体がコンポーネントとなります。上記では、dataオプションも設定していますが、他にもmethods やcomputed、後述するpropsなどがあります。

 

10行目

実際にコンポーネントのtemplateオプションで定義した内容が表示される部分です。このタグをカスタムタグと呼びます。

 

 

下記コードが「ローカル配置」となります。

28〜30行目

グローバル配置と違い、作成したオブジェクトは利用先のcomponentsオプションで定義する必要があります。上記では利用先である<div id=”app”>〜</div>内(elオプションが#appを設定)でのみ有効となるローカル配置となります。

 

後述しますが、上記においてルートVueインスタンスを親、myComponentNameは子の関係にあると言います。

 

 

コンポーネントの親子関係


 

ある任意のコンポーネントを取り込み利用した場合に、そのコンポーネント自体を子、利用した先は親という関係になります。この関係を端的に表したのが下図です。AコンポーネントはBコンポーネントを利用しています。

 

 

上記の関係を、コードで表現すると下記のようになります。23行目において、Aコンポーネントのtemplateの中で、子となるBコンポーネント(<b-component />)を利用しています。Bコンポーネントを利用するために、25行目においてbComponentを定義しています。

30〜33行目

「コンポーネントの配置」の項目でも述べましたが、上記コードにおいて、ルートVueインスタンスはAコンポーネントの親という関係も成り立ちます。

 

 

 

コンポーネント間の通信、親から子へ(props)


 

次にコンポーネント間においてのデータのやり取りを説明していきます。

 

親コンポーネントから子コンポーネントへは、propsを利用してデータを渡します。

 

上述した親子関係を持つAコンポーネント(親)とBコンポーネント(子)において、実際に親が持つ「message: ‘こんにちわ’」というデータを子へ渡してみます。

以下流れに沿って説明していきます。

30行目 親であるAコンポーネントの持つ「message」データです。

24行目 子コンポーネント(b-component)へは属性で渡します。データバインディングで設定します。

19行目 子であるBコンポーネントでは、親から受け取るデータはpropsオプション※1内で定義する必要があります。そしてテンプレート内(18行目)において{{myMessage}}のように記述し表示させます。

 

※1 propsについて:実際には配列ではなくオブジェクトにして、下記のように受け取る型を指定するなどの設定をおこないます。本記事では説明しません。

 

 

 

 

子から親へ($emitとカスタムイベント)


 

同様に、親子関係を持つAコンポーネント(親)とBコンポーネント(子)において、子コンポーネントで発生するイベントから親コンポーネント側のメソッドを実行してみます。

 

19行目

@clickは、v-on:clickと同じです。子コンポーネント側のボタンをクリックすると、this.$emit(‘b-event’)でカスタムイベントであるb-eventが発火し、親側でそのb-eventをキャッチします(30行目)。

 

つまり、子コンポーネント側で$emit(‘カスタムイベント’)が発火すると、親コンポーネント側では「@カスタムイベント」で発火をキャッチ、それに紐付いたメソッドが実行される仕組みです。

 

 

$emitの第2引数に、親コンポーネントに渡すデータを指定することもできます。

 

 

 

 

実際のプロジェクトにおいて


 

上記までのコンポーネントの仕組みをより具体的にイメージし理解するために、Vue Cli 3によって生成された実際のプロジェクトで見てみます。

 

プロジェクトの作成に関しては下記の関連ページをご覧下さい。

 

関連ページ

Vue CLI 3 ではじめるVue RouterとVuex入門

 

 

下記構造がVue Cli 3によって生成されたデフォルトのファイル群となります。

src>componentsディレクトリ内にHelloWorld.vueがありますが、これがいわば部品として利用されているコンポーネントです。実際にはHome.vue内で利用されています。

 

 

Home.vueファイルは下記のように記述されています。

10行目でHelloWorld.vueを取り込み、このコンポーネントを利用するために自身のcomponentsオプション(15行目)で定義しています。実際にHTMLとして描画されるtemplate内において<HelloWorld />タグを記述し、子コンポーネントであるHelloWorld.vue(のtemplate)を表示させています(4行目)。

 

<HelloWorld />タグにはその属性として、msg=”Welcome to Your Vue.js App”が指定されています。これは子コンポーネントに対してデータを送っています。

 

下記コードが子であるHelloWorld.vueですが、10〜12行目のpropsオプションにおいて、親から渡されるmsgを定義しています。実際にHTMLで表示されるのは3行目の{{ msg }}です。

 

 

 

 

参照ページ


 

コンポーネントの基本

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー