はじめに

最近、Vue.jsを使って自学用にWEBアプリを作成しているのですが、
そこでコンポーネントを使った実装をする機会がありました。

今回はその中で得たコンポーネントの概念的な基礎知識や
コンポーネント間のデータのやりとりについて書いていきます。

コンポーネントとは

コンポーネントとは、ある特定の機能を保有した再利用可能な「部品」を指し、
Vue.jsでは「再利用可能なVueインスタンス」と定義できます。

また、コンポーネントを組み合わせてWEBアプリケーションを構築する開発を
「コンポーネント指向開発」と呼びます。

最近のフロントエンドの開発ではこの手法が主流になってきています。

先ほど「コンポーネント指向開発がモダンフロントエンド開発手法のスタンダード」
と書きましたが、そこにはやはり理由があります。

コンポーネント指向が採用される最大の理由は、
「再利用性が高い」という点です。

従来の開発手法では、同じUIパーツを複数ページに実装する場合、
同一コードを何度も書く必要がありました。

しかし、コンポーネントを使用すると、
機能ごとにコンポーネントとして分割した部品を再利用できます。
そのため開発スピードの向上が期待できるのです。

また、機能が分かれていることからメンテナンス性も高まり、
これらのメリットはより大規模な開発を行う際に実感できます。

コンポーネントには大きく分けて２つの種類があります。
それは「取り込む側のコンポーネント」と「取り込まれる側のコンポーネント」です。

そして、Vue.jsでは取り込む側を「親コンポーネント」、
取り込まれる側を「子コンポーネント」と呼びます。

Vue.jsでは親子間のデータのやりとりをpropsとemitで実現します。

props：親から子に渡されるデータ
emit：子から親に渡されるデータ

propsとemitの具体的な書き方については後日別記事で整理します。