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

Vue.jsのコンポーネントとは

Vue.jsの良いところは「コンポーネント」と言う部品を機能毎に開発できるところにあります。

Why?

わざわざ部品にしなくても良いのでは？と疑問に感じた方はECサイトなどの商品一覧ページを想像してみてください。

商品や、レビュー、値段などを一から全部書くのは少々手間です。また、値段の位置などは均一でないといけないので、少しのタイプミスも許されません。

なので、部品化してしまい再利用可能なコンポーネントを作ろうというのがコンポーネントを利用する意味です。

詳しくは下記を参考ください。

qiita.com

コンポーネントの定義

Vue.jsコンポーネントを使うにはグローバル、もしくはローカルに登録して利用します。

グローバル

html

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

javascript

Vue.component('my-component', {
    template: '<p>Mycomponent</p>',
})
//第一引数　カスタムタグで使う名前
//第二引数　オプション

var app = new Vue({
    el: '#app',
})

描画

<div id="app">
    <p>Mycomponent</p>
    <!-- コンポーネントで定義されているテンプレートと置き換わっている -->
</div>

描画される前の<my-component></my-component>をインスタンスと言います。

例えば今回はel: '#app'のように定義しているので、<div id="app"><div>で利用できますが、el: '#vm'のように新しくNEWしたら、そちらでも<my-component></my-component>が使えるようになります。

つまりグローバルで定義しているからです。

ローカル

var myComponent = {
    template: '<p>Mycomponent</p>',
}

new Vue({
    el: '#app',
    component: {
        'my-component': myComponent
    }
})

ローカルで定義する際はNEWの中にcomponentオプションを定義します。

componentはnewの上記で定義しています。

ちなみにコンポーネントをnewする前に書かないと読み込んでくれないのでnewする前に定義しましょう。

コンポーネントの命名については下記を参照。

コンポーネントの登録 — Vue.js

コンポーネントのオプション

コンポーネントは下記のようにオプションを記述できますが注意点があります。

それはdataはオブジェクトを返す関数にしないといけない点です。

Vue.component('my-component', {
    template: '<p>{{ message }}</p>',
    data: function() {
        return {
            message: 'Hello World!'
        }
    },
    methods: {
    }
})

Why?

複数のコンポーネントインスタンスで同じオブジェクトを参照して状態が変化してしまうのを回避するためです。

ということは下記のインスタンスは別々のインスタンスであることが分かります。

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

参照

基礎から学ぶ Vue.js

https://vuejs.org/v2/guide/components.html