Vue.jsのコンポーネントについて

vue.jsを触っていると、インスタンスとコンポーネントとか概念が出てきてごっちゃになりそうだったので、ここではコンポーネントについてまとめます。

コンポーネントとは

• 同じような処理を行う部分を部品としてまとまった部品

• ある部品が、HTML上で、「どのように表示されるのか」をオブジェクトとしてまとめるには、templateオプションを使います。そのtemplateオプションでまとめたオブジェクトに名前（コンポーネントのタグ名）をつけたもの。

index.html

<my-component></my-component> <!-- ←ここに部品が表示される -->

ちなみに

コンポーネントの命名規則は、
パスカルケース(アッパーキャメル) or ケバブケースだそうです

• パスカル（アッパーキャメル)ケース・・・単語の最初を大文字で始める書き方　（HogeFuga　など）
• ケバブケース・・・単語間をハイフンで繋ぐ書き方　(hoge-fuga)

なので上の例では、ケバブケースで書かれてるってことになります

作ったコンポーネントの使い方

• グローバルに登録する方法
• ローカルに登録する方法

がありますが、ローカルに登録する方法を書いていきます。

ローカルに登録してコンポーネントを使えるようにする

Vueインスタンスのcomponentオプションに、「コンポーネントのタグ名：コンポーネントのオブジェクト名」と指定して、このVueインスタンス内で使えるように登録する。

vue.js

var コンポーネントのオブジェクト名 = {
   template:'HTML部分'
}
new Vue({
  el:'#app'
  components:{
  'コンポーネントのタグ名':コンポーネントのオブジェクト名
}
})

という感じで書きます

<div id="app">
 <my-component></my-component>
 <my-component></my-component>
 <my-component></my-component>
</div>

vue.js

 var MyComponent = {'<p class="my-comp">Hello</p>'
 }
new Vue({
  el:'#app',
  components:{
   'my-component':MyComponent
 }
})

Vueインスタンスの「components:」には、「コンポーネントのタグ名：コンポーネントのオブジェクト名」と指定し、「my-component 」というタグ名に「MyComponent」オブジェクトを設定する。
これで、HTML 上に<my-component></my-component>と書くだけで、作ったコンポーネントが表示されるようになります。