Vue

【Vue.js 2.9】はじめてのVue.js コンポーネント

  /

・コンポーネントの定義方法紹介
・コンポーネント名の注意事項

はじめに

今回はコンポーネントについてコンポーネントの使い方、コンポーネント名の命名規約の紹介となります。

【Vue.js 2.9】はじめてのVue.js フォーム入力修飾子 ・フォーム入力バインディングの修飾子紹介。・lazy,trim,number はじめに 今回はフォーム入力項目の双方向バ...

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

コンポーネントとは

コンポーネントとは再利用可能なVueインスタンスです。
例えば、共通の文字や税込価格など色んなところで共通な表示をする場合などに用いられます。

共通化することで管理やカスタマイズの工数が減るメリットがあります。

コンポーネントの書き方

グローバル

コンポーネントにはテンプレートと似ていて、グローバルとローカルが存在します。
まず始めにグローバルです。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <hello-component-global></hello-component-global>
</div>
<hr>
<div id="bcd">
  <hello-component-global></hello-component-global>
</div>
Vue.component('hello-component-global', {
    template: '<p>Hello Global!</p>'
})
var app = new Vue({
    el: '#app'
})
var app = new Vue({
    el: '#bcd'
})

Vueインスタンスより上にコンポーネントを記述する必要があるため１行目からコンポーネントを記述しています。
コンポーネントの呼び出しはコンポーネント名をHTMLタグ化した形で呼び出します。
グローバルであるため、appとbcdというVueインスタンスに対して同じコンポーネントを呼ぶことが可能です。

ローカル

続いてはローカルです。
HTML側の使い方はグローバルと同じです。Vue.js側での定義が微妙に違います。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <hello-component-global></hello-component-global>
  <hr>
  <hello-component-local></hello-component-local>
</div>
<hr>
<div id="bcd">
  <hello-component-global></hello-component-global>
</div>
Vue.component('hello-component-global', {
    template: '<p>Hello Global!</p>'
})
var helloComponentLocal = {
	template: '<p>Hello Local!</p>'
}
var app = new Vue({
    el: '#app',
    components: {
    	'hello-component-local': helloComponentLocal
    },
})
var app = new Vue({
    el: '#bcd'
})

コンポーネント自体の書き方はグローバルとローカルで殆ど差異はありません。
ローカルの場合は変数化して、対象のVueインスタンスでcomponentsでコンポーネント名を定義します。

コンポーネント名の注意事項

コンポーネント名はハイフンがあるケバブケースか、１文字目が大文字のパスカルケースが推奨されています。
理由としてはHTMLタグとして使うため、今後のHTMLタグでコンポーネント名が使われないとも限らないという理由です。

あくまで推奨なのでキャメルケースでもエラーとはなりませんが保守を考えると推奨をスルーして使う理由はありません。

参考記事

Vue.js – コンポーネントの基本
https://jp.vuejs.org/v2/guide/components.html

RELATED POST