[vue]子コンポーネントにデータを渡す(v-bindとprops)

実務でvueが導入されてほぼ1から勉強することになりました。ピンチです。

やりたいこと

props とv-bindを使って、親コンポーネントのdataを子コンポーネントに渡す。

<template>
    <div>
        <Child v-bind:message="message" />    
    </div>
</template>

<script>
    import Child from './Child.vue'

    export default {
        name: 'Parent',
        data: function() {
            return {
                message : [
                    { en: 'Hello!', ja: 'こんにちは！'},
                    { en: 'Good Morning!', ja: 'おはよう！'},
                    { en: 'Good Afternoon!', ja: 'こんにちは！'},
                    { en: 'Good Evening!', ja: 'こんばんは！'}
                ]

<template>
    <div>
        <p v-for="m in message" v-bind:key="m" >
            {{ m.en }}
        </p>
    </div>
</template>

<script>
    export default {
        props: [
            'message'
        ],
    }
</script>

htmlの出力。

Hello!

Good Morning!

Good Afternoon!

Good Evening!

v-bind

 <Child v-bind:message="message" />    

v-bind: 子のpropsの値=親のdataの値　のようにする。

v-for

<p v-for="m in message" v-bind:key="m" >
            {{ m.en }}
</p>

v-forで各個表示。