【Vue.js】コンポーネントの登録方法

Vueは、ひとつのインスタンスにつき、ひとつのテンプレートにしか適用されない仕様です。
インスタンスを再利用するときは、コンポーネントを使用します。

スポンサーリンク

コンポーネント登録の方法

グローバル登録とローカル登録があります。

グローバル登録

グローバル登録は、全てのルートVueインスタンスのテンプレート内で使用ができます。

Vue.component()で呼び出し、第1引数にコンポーネント名第2引数にオブジェクトを入れる。

第1引数のコンポーネント名には、HTMLタグとの衝突を避けるため、命名ルールに従う。

Vue.component('第1引数 コンポーネント名', {第2引数 オブジェクト})

componentでdataを用いる際は、関数(function)を使わなければならない。returnで値を返す。

<dataがなぜ関数にする必要があるかのメモ>
オブジェクトにした場合、ひとつのメモリを参照してしまうため、他のコンポーネントにも影響を及ぼす。
関数を使う事で、それぞれのコンポーネントのメモリーを別々に置き、他のコンポーネントへの影響を防ぐ。

Vue.component('component-1', {
  data:function(){
    return {
       number:100
    }
   },
   template: '<p>{{number}}</p>'
})

テンプレート(HTML)上には、コンポーネント名 <component-1></component-1> を使って表示させる。

<div id="app">
    <component-1></component-1>
    <component-1></component-1>
    <component-1></component-1>
    <component-1></component-1>
</div>

ローカル登録

特定のVueインスタンスのみにコンポーネント使う場合、ローカル登録を用いる。

コンポーネントを変数に格納する。

var component = {
   data: function () {
        return {
             number: 0
       }
    },
   template: '<p>{{number}}<button @click="count">up</button></p>',
    methods: {
        count: function () {   
          this.number += 1;
     }
   }
}

変数に格納したコンポーネントを使いたいインスタンス上で呼び出す。

new Vue({
    el: '#app2',
    components: {
          'component-1': component
     }
})

components のオブジェクト内は、下記のように定義する。
‘コンポーネント名’:呼び出したいコンポーネント名
‘component-1’: component

単一ファイルコンポーネント

テンプレート(HTML)、CSS、Vueをひとつのパーツにまとめ、.vueというファイルで扱う方法。

Count.vueファイルの作成。

<template>
<div>
  <p>ただいまのカウント:({{number}})</p>
  <button @click="count">カウンター</button>
</div>
</template>


<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  methods:{
      count(){
          this.number += 1;
      }
  }
};
</script> 

main.js上で先ほど作成したCount.vueファイルをimportをする。

import Count from './Count.vue'

同じくmain.jsでコンポーネントをグローバル登録する。

Vue.component('Count',Count);

App.vue上で、コンポーネントを呼び出し。

<template>
 <Count></Count>
</template>

単一ファイルコンポーネントをローカル登録する

main.jsでimportしなくともApp.vueで使用できるようにする。
今回は、「CountHeader.vue」ファイルを作成済み。
App.vue上でimportをする。

<template>
  <div>
    <CountHeader></CountHeader>
    <Count></Count>
  </div>
</template>

<script>
import CountHeader from "./CountHeader.vue";

export default {
  components: {
    CountHeader
  }
};
</script>

コンポーネントの命名規則

ケバブケースかパスカルケースにする。
どちらを使用してもいいが、統一した方が良い。
ブラウザーは大文字と小文字の区別がつけられないため、DOMテンプレート(※1)ではケバブケースが推奨される。
※1:htmlに直接書き込む場合。VueCLIを使用している場合は問題なし。

ケバブケース

単語の間に「-」ハイフンを用いる書き方。

count-header

パスカルケース

単語の一文字目を大文字にした書き方。

CouontHeader

コンポーネントにcssを追加する

対象のコンポーネントのみにstyleを適用したい場合、styleタグの中にscopedを追加する。

<style scoped>
div {
  background: blue;
}
</style>

scopedを追加する事によって、CSSに属性指定を持たせる事ができる。

タイトルとURLをコピーしました