はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

こちらのサイトにcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

コンポーネントシステムについて

これまではページのみで様々なプロジェクトを作成してきました。

ここからはコンポーネントシステムを含めたプロジェクトの作成

コンポーネントシステムは 再利用性を意識したプロジェクトにおいて重要な抽象概念です。

「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、

中・大規模アプリケーションをきれいに、わかりやすく構築することが可能になります。

アプリケーションのインターフェイスについて考えてみると、

ほぼすべてのタイプのインターフェイスはコンポーネントツリーとして抽象化することができます。

シンプルなコンポーネント利用

簡単なコンポーネント利用のプロジェクトをこちらのサイトで作成しました。

実物を見ながらコードのほうも確認できます。

ここからはコードの解説です。

・＜script＞内でのコンポーネントの呼び出し処理

処理としては２つです。

コンポーネントのインポート処理

import todoItem from "~/components/todoItem.vue";

利用コンポーネントの宣言処理

components: {
    todoItem
  }

これで＜template＞内で自由にコンポーネントを利用することができます。

・＜template＞内でのコンポーネント呼び出し処理

こちらもシンプルなコードで呼び出すことができます。

<todoItem></todoItem>

上記のコードにより、todoItem.vueの中身を利用することができます。

コンポーネントにデータを渡す（props）

propsとは、親（page or component）から子（component）にデータを渡す仕組みです。

こちらも実物を見ながらコードを確認していきましょう。

今回注目していただきたいのは次の２つのコードです。

・親（page）からpropsを設定するコード（index.vue）

<todoItem todoText="This is a props todo"></todoItem>

・子（component）がpropsを受け取るコード（todoItem.vue）

props: ["todoText"]

propsでデータを渡すこと自体はさほど難しくないかと思われます。

実際にプロジェクトを作成していく中で難しいのは、propsをどう使っていくのかです。

コンポーネントを少しだけ変えてループで使いまわす（propsとループ）

同一コンポーネントをループ処理で使いまわします。

こちらも実物を見ながら確認していきましょう。

注目していただきたいのは次のコードです。

<todoItem v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todoItem>

コンポーネント呼び出しのコードだけで、ループ処理まで実現できてしまいます。

propsのオプション

詳しい使い方はここでは省略しますが、propsには次のようなオプション機能が存在します。

・type – データの種類の指定（String,Number,Boolean）

・require – 必須かどうかを指定

・default – 初期値の指定。値が入っていなければdefaultの値が採用される

おわりに

簡単にですが、基本的なコンポーネントの使い方について紹介しました。

コンポーネントを上手に使えば、まとまったコードを記載することができます。

どの単位でコンポーネントを分割するのかを考え、有効的にコンポーネントを利用していきましょう。

お疲れ様でした。