Vue.jsコンポーネント定義

Vue.jsのコンポーネント定義パターンについて覚書。

1. ローカルコンポーネントの定義

あるVueインスタンスに対してコンポーネントを定義します。

1-1. タグベースの定義

Vue.component(tag, option)の形式で、tagにはコンポーネントとして作成したいタグ名、optionにはVueインスタンスで使用できるオプションを渡すことができます。普通は1-2の手法よりもこちらが使われるケースが多いようです。

new Vue({
    el: '#hoge',
    components: {
        'my-description': {
            template: '<p>これは{{test}}の説明です</p>',
            data() {
                return {
                    test: '1-1'
                }
            }
            // data: {
            //     test: '1-1'
            // }
        }
    }
})

<div id="hoge">
    <my-description></my-description>
    <!-- 「これは1-1の説明です」と表示される -->
　<!-- Vueの本体と実装したJSを読み込むコードは省略(以下同様) -->
</div> 

jsのコード中でコメントアウトしていますが、コンポーネントを定義する際はdataオプションをオブジェクトとして直接書くのではなく、メソッドとして定義してその中でオブジェクトを返却するように書く必要があります。

1-2. コンストラクタベースの定義

Vue.extend()でVueコンストラクタを継承したサブクラスを作成し、それをVueインスタンスのcomponentsの中で渡します。こちらも1-1と同様dataオプションは関数としてオブジェクトを返す必要があります。

const description = Vue.extend({
    template: '<p>これは{{test}}の説明です</p>',
    data() {
        return {
            test: '1-2'
        }
    }
})

new Vue({
    el: '#fuga',
    components: {
        'my-description': description
    }
})

<div id="fuga">
    <my-description></my-description>
    <!-- 「これは1-2の説明です」と表示される -->
</div>

2. グローバルコンポーネントの定義

グローバルなVueに対してコンポーネントを定義するため、newされる全てのVueインスタンスに影響します。果たして使いどころはあるのか・・・

2-1.タグベースの定義

Vue.component('my-title', {
    template: '<h1>タイトル</h1>'
})

new Vue({
  el: '#app'
})

<div id='app'>
  <my-title></my-title>
</div>

終わりに

追記しないとも限らない