Vueコンポーネントの基本

今日は、Vue.js公式の
「Vueコンポーネントの基本」を読んでみました。
コンポーネントの基本

コンポーネントの基本

例えば、下図のTwitterのいいねボタン。

大きさはとても小さいですが、このボタンには、色々な情報が詰め込まれています。
パッと思いつく感じでも。

• カーソルが触れると赤くひかる
• 押されると、カウントが１増える
• もう一度押されるとカウントが１減る
• ハートマークのアイコン
• マウスオーバーエフェクトが動作する。

などです。
これらの情報は、「最小単位のコンポーネントが持っておくべき。」というのが基本的な考え方です。

参考：Atomic Design を
分かったつもりになる

ボタンコンポーネントを作ってみる

Vueにおいて、コンポーネントを作ることは簡単です。
オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。

data要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。

上記のコードでは、button-counter`という名前のコンポーネントを作成し、`#components-demoにマウントしています。
マウント先のHTMLはこんな感じ。

インスタンス化したコンポーネントは何度でも使い回すことができ、それぞれのコンポーネントは完全に独立しています。

親要素から子要素への値の受け渡し

以下の図のようにするとpropを使ったデータの受け渡しをすることができます。

子コンポーネントに汎用性を持たせるために、具体的なデータを入れたくない場合は、上図のように、コンポーネントを分けると、コンポーネントの使い回しが容易になるかと思います。