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

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

 メニュー

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

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

コンポーネントを作る

以下に簡単な例を示します。ここでは、<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、CSSJavaScriptを部品に切り出して、再利用できるようになりました。今回の例は簡単なものでしたが、より凝ったものを作るにはVue.jsのリファレンスなどを参考にしてください。

参考サイト