はじめに
自分が勉強した内容のまとめなので、正確性は保証しません。
こちらのサイトに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の値が採用される
おわりに
簡単にですが、基本的なコンポーネントの使い方について紹介しました。
コンポーネントを上手に使えば、まとまったコードを記載することができます。
どの単位でコンポーネントを分割するのかを考え、有効的にコンポーネントを利用していきましょう。
お疲れ様でした。