【Vue】入門編(コンポーネントの親子関係)

こんにちは。 本日はVue.js入門編の続きです。

概要

コンポーネントの親子関係とは？

親子関係は、コンポーネントを使う側・使われる側で成り立ちます。

前回の記事のサンプルでは、
Vueインスタンスが親、コンポーネントが子となります。
(Vueインスタンスは、コンポーネントではないですが)

nandakagoodvibes.hatenablog.com

propsとは？

propsは親から子へデータを渡す際に使用します。
以下のように記載します。

props: {
    属性名: {
        オプション
    }
}

ちなみに、データは親から子へのみ渡すことが可能です。

サンプルソース

親子関係のサンプル

シンプルな親子関係のサンプルです。
parent-componentが親で、child-componentが子となります。

<div id="app">
    <parent-component></parent-component>
</div>
<script>
    Vue.component('child-component', {
        template: '<div><h2>子コンポーネントです</h2></div>'
    })

    Vue.component('parent-component', {
        template: '<div><h1>親コンポーネントです</h1><child-component /></div>'
    })

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

propsを用いたデータの受け渡しサンプル

次のサンプルは、
Vueインスタンスを親、item-componentが子となります。
親のvalを、子のpropsのtextValueに渡しています。
ちなみに、propsでの属性値はキャメルケースで、
テンプレートはケバブケースで記載します。

<div id="app">
    <item-component v-bind:text-value="val"></item-component>
</div>
<script>
    Vue.component('item-component', {
        props: {
            textValue: {
                type: String
            }
        },

        template: '<div>{{ textValue }}</div>'
    })

    new Vue({
        el: '#app',
        data : {
            val: 'Hello World!'
        }
    })
</script>

以上です。