[Vue] コンポーネント 親から子へ「props」で値を渡す

Vueのコンポーネントに props で属性値(データ)を渡すサンプルです。

親から子へ「props」で値を渡す

コード

template

<template>
<div id="app">
	<!-- Parent -->
	<input 
        type="text" 
        v-model="inputText"
        placeholder="入力してください。"
    >
    <!-- <p>入力した値 : {{ inputText }}</p> -->

    <!-- Component : Child -->
    <child-item 
        title="Child"
        :content="inputText"
    ></child-item>
</div>
</template>

script

<script>
var childItem = Vue.component( 'child-item', {
    props: {
        title: {
            type: String,
            required: true,
        },
        content: {
            type: String,
            default: "デフォルト"
        },
        number: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="child">
            <h2>title : {{ title }}</h2>
            <p>content : {{ content }}</p>
            <p>number : {{ number }}</p>
        </div>
    `
});

export default {
    components: {
        childItem
    },
    data() {
        return {
            inputText: ''
        };
    }
};
</script>

親から子、子から孫へ「props」で値を渡す

コード

template

<template>
<div id="app">
	<!-- Parent -->
	<input 
        type="text" 
        v-model="inputText"
        placeholder="入力してください。"
    >
    <!-- <p>入力した値 : {{ inputText }}</p> -->

    <!-- Component : Child -->
    <child-item 
        title="Child"
        :content="inputText"
    ></child-item>
</div>
</template>

script

<script>
var grandItem = Vue.component( 'grand-item', {
    props: {
        title: {
            type: String,
            required: true,
        },
        content: {
            type: String,
            default: "デフォルト"
        },
        number: {
            type: Number,
            default: 20
        }
    },
    template: `
        <div class="grand">
            <h2>title : {{ title }}</h2>
            <p>content : {{ content }}</p>
            <p>number : {{ number }}</p>
        </div>
    `
}); 
    
var childItem = Vue.component( 'child-item', {
    components: {
        grandItem
    },
    props: {
        title: {
            type: String,
            required: true,
        },
        content: {
            type: String,
            default: "デフォルト"
        },
        number: {
            type: Number,
            default: 0
        }
    },
    template: `
    	<div class="child">
            <h2>title : {{ title }}</h2>
            <p>content : {{ content }}</p>
            <p>number : {{ number }}</p>

			<!-- Component : GrandChild -->
            <grand-item
                title="Grand"
                :content="content"
            ></grand-item>
        </div>
    `
});
    
export default {
    components: {
        childItem
    },
    data() {
        return {
            inputText: ''
        };
    },
    methods: {
        
    }
};
</script>

メモ