Vue.jsのコンポーネントを使ってみる

Vue.jsのコンポーネントの使い方について簡単に試してみます。

サンプルコード

まずはグローバルにコンポーネントを定義してみます。
Vue.component()の第一引数にコンポーネント名、第二引数にオプションを設定します。

Vue.component('button-sample', {
  template: '<button>button</button>'
})

var app = new Vue({
  el: '#app',
});

オプション内のtemplateの値がコンポーネントの要素になります。
この場合button-sampleという名前のコンポーネントを作成しました。

このコンポーネントを以下のように使用できます。

<div id="app">
  <button-sample></button-sample>
</div>

これでボタンのコンポーネントを追加できました。
コンポーネント使用のデモページ

第二引数のオプションにdataなどを設定することもできます。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">count {{ count }}</button>'
})

var app = new Vue({
  el: '#app',
});

コンポーネント名をbutton-counterに変更して、dataで設定したcountをボタンクリックで変更するようにしました。
注意点として、コンポーネント内のdataを関数にしています。

このコンポーネントを以下のように使用できます。

<div id="app">
  <button-counter></button-counter>
</div>

これでカウントアップするボタンのコンポーネントを追加できました。
コンポーネント使用のデモページ2

コンポーネントは再利用可能なので、複数設置もできます。

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

コンポーネント毎に新しいインスタンスが作成されるため、ボタン毎にカウント数が保持されます。
コンポーネント複数設置のデモページ

ここまでで試したVue.component()はグローバルにコンポーネントを定義する方法ですが、これとは別にローカルにコンポーネントを定義することもできます。
前述のコンポーネントをローカルで定義してみます。

var app = new Vue({
  el: '#app',
  components: {
    'button-counter': {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">count {{ count }}</button>'
    },
  }
});

componentsオプション内にコンポーネントを定義しています。
これでこのインスタンス内のみでコンポーネントが使用できるようになりました。
ローカルコンポーネントのデモページ