Last-Modified: 2022/05/16

Vue.jsのコンポーネント【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのコンポーネントについて、簡単に解説していきます。

コンポーネントについて

Vue.jsではコンポーネントを作ることが可能です。

コンポーネントとは、あらかじめ定義されたVueのインスタンスです。

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

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

new Vue({ el: '#app' })
</script>

上記の例では、クリック回数表示機能付きボタンをbutton-counterという名前でコンポーネント化し、使っています。

コンポーネントの再利用

コンポーネントは再利用することができます。

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

先程の例では、button-counterのコンポーネントを何度も利用できます。

このときに、クリック回数であるcountプロパティはそれぞれのコンポーネントで独立しています。

ローカル登録

先程のコンポーネントはグローバル登録をしました。

すなわち、どこでも使えるコンポーネントということです。

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

<script>
var buttonCounter = {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">{{ count }}回目のクリック</button>'
}

new Vue({
  el: '#app',
  components: {
    'buttonCounter': buttonCounter
  }
})
</script>

ローカル登録も可能で、例えば、上記のコードでは、先程のコンポーネントをappというidの要素の中だけで使えるコンポーネントにしています。

• facebook
• Tweet
• Read Later