今日は、Vue.js公式の
「Vueコンポーネントの基本」を読んでみました。
コンポーネントの基本
コンポーネントの基本
例えば、下図のTwitterのいいねボタン。

大きさはとても小さいですが、このボタンには、色々な情報が詰め込まれています。
パッと思いつく感じでも。
- カーソルが触れると赤くひかる
- 押されると、カウントが1増える
- もう一度押されるとカウントが1減る
- ハートマークのアイコン
- マウスオーバーエフェクトが動作する。
などです。
これらの情報は、「最小単位のコンポーネントが持っておくべき。」というのが基本的な考え方です。
ボタンコンポーネントを作ってみる
Vueにおいて、コンポーネントを作ることは簡単です。
オブジェクト志向言語に馴染みがある人は、コンポーネントはクラスのような物だと言われるとピントくるかもしれません。
1 2 3 4 5 6 7 8 9 10 |
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) new Vue({el: '#components-demo'}) |
要素を関数にしないと、コンポーネントが独立した存在ではなくなってしまいます。
data
上記のコードでは、
にマウントしています。button-counter
`という名前のコンポーネントを作成し、
`#components-demo
マウント先のHTMLはこんな感じ。
1 2 3 4 5 |
<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> |
インスタンス化したコンポーネントは何度でも使い回すことができ、それぞれのコンポーネントは完全に独立しています。
親要素から子要素への値の受け渡し
以下の図のようにすると
を使ったデータの受け渡しをすることができます。prop

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