元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【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)は、各インスタンスで持ちます。

参考サイト