【Vue.js】コンポーネントでパーツを作る

コンポーネントで再利用可能なパーツを作ります。つまり、ページのある箇所のHTML、CSS、JavaScriptを部品に切り出して、再利用できる形にします。例えば、ナビゲーションバーやヘッダー、フッターを部品に切り出して使うことが考えられます。そして、切り出した部品を新たなタグとして定義します。

コンポーネントを作る

以下に簡単な例を示します。ここでは、<click-box>～</click-box>というタグを新たに作ります。このタグの内容をVue.component()で定義します。

<div id="app">
  <click-box>クリックしてください。</click-box>
</div>

// コンポーネントを作る
Vue.component('click-box', {
  template: `
    <div class="click">
      <strong>Click me!</strong>
      <slot></slot>
    </div>
  `
});

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

.click{
  background-color: #ccccff;
  padding: 10px;
  border
}

以下のように表示されます。

ブラウザの検証でElementsを確認すると、<click-box>クリックしてください。</click-box>がVue.component()のtemplateで定義したHTMLに置き換わっているのが確認できます。また、<slot></slot>の部分は、「クリックしてください。」に置き換えられました。

コンポーネントの再利用

コンポーネントは再利用できるということなので、試してみます。

<div id="app">
  <click-box>クリックしてください。</click-box>
  <click-box>クリックしますか？</click-box>
</div>

以下のように表示されます。

同じ部品が2つ表示されたのが確認できます。また、<slot></slot>の文言が対応するものに置き換わっているのが確認できます。

コンポーネントにメソッドを定義する

コンポーネントにメソッドを定義します。

Vue.component('click-box', {
  template: `
    <div class="click" v-on:click="attention">
      <strong>Click me!</strong>
      <slot></slot>
    </div>
  `,
  methods: {
    attention: function(){
      alert('クリックされました。');
    }
  }
});

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

「Click me!クリックしてください。」をクリックするとmethodsで定義したアラートが表示されます。

まとめ

HTML、CSS、JavaScriptを部品に切り出して、再利用できるようになりました。今回の例は簡単なものでしたが、より凝ったものを作るにはVue.jsのリファレンスなどを参考にしてください。

参考サイト

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