【Vue.js】コンポーネントの基本:Vue.component()

コンポーネントの基本の記述について書きます。ここでは、クリックイベントを持つコンポーネントの例を簡単に見ていきます。他の記事でも書きましたが、改めてコンポーネントが再利用可能であることを確認します。

コンポーネントの基本の記述

コンポーネントは、以下のように定義します。

Vue.component('コンポーネント名', {
  // ... オプション ...
})

オプションには、data、template、methodsなどを指定できます。dataオプションは、関数として定義します。elは指定できません。

コンポーネントの記述例

ex.)ボタンをクリックするとクリックした数を表示します。

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

// コンポーネントの定義
Vue.component('button-counter', {
  data: function(){
    return {
      count: 0
    }
  },
  template: `<button v-on:click="count++">{{ count }}回クリックしました。</button>`
})

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

クリックした回数分、数値が増加します。

dataオプションは、オブジェクトで記述するとエラーになるので、関数にします。templateオプションでは、buttonタグにクリックイベントを設定しています。クリックしたらcountの値を増加し、その値を{{ count }}で表示します。

コンポーネントのdataオプションは関数にする

コンポーネントのdataオプションは関数でなければいけません。例えば、以下のように記述するとエラーになります。

Vue.component('button-counter', {
  data: {
    count: 0
  },
  ...
})

コンポーネントの再利用

コンポーネントが再利用可能であることを確認します。コンポーネントで定義したbutton-counterタグを複数個、記述して動作を確認します。

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

それぞれのボタンをクリックすると下図のようになります。

ボタンをクリックするとcountの値が共有されていないことが分かります。クリック数(count)は、各インスタンスで持ちます。

参考サイト

• コンポーネントの基本 — Vue.js