Vue.js プロップスの話

#プロップスとは
親コンポーネントから子コンポーネントにデータを渡す方法

大変な蛇足を交えながらメモしていきたいと思います。

##親コンポーネントを準備
今回は親(Parent.vue)と子(Child.vue)の2つのコンポーネントを準備。
いつも、scriptタグの中身はいろいろ見ながら書いてしまう。
いい加減覚えたい。

Parent.vue

<!--親コンポーネント-->
<template>
<Child></Child>
</template>
<script>
    import Child from "../components/Child";
    export default {
        components:{Child}
    }
</script>

↑初期状態。

###子にわたすデータを追加する
親は子に「はやく寝なさい」と伝えたいようなので、msg:"はやく寝なさい"を追加しました。

Parent.vue

<template>
<Child></Child>
</template>
<script>
    import Child from "../components/Child";
    export default {
        components:{Child},
// ここから追加
        data(){ 
            return{
                msg:"はやく寝なさい"
            }
        }
    }
</script>

##子コンポーネントを準備
scriptタグでprops:以下省略を設定します。

Child.vue

<!--子コンポーネント-->
<template>
    <div>
        {{nanikaitteru}}
    </div>
</template>
<script>
export default {
    components:{},
//ここから追加
    props:{             
        nanikaitteru:{
            type:Text
        }
    }
}
</script>

子のほうは親に言われたことがまだわからないようで、「なにか言ってる」としか思っていないようです。

nanikaitteruと思っているので、一応type:Textに指定して受け取る準備をしました。
数字(int)が聞こえてきたら耳を塞ぐようです。

##子にデータを渡す
親のtemplateタグで、子にデータを渡します。

Parent.vue

<template>
<Child :nanikaitteru = msg></Child>
</template>

親は子側で受け取る値をnanikaitteruに設定し、そこにmsgを送ります。
※子側で受け取る値は絶対もっとわかりやすいものでよいです。親側のデータ名と同じmsgでも絶対いいです。

##おまけ
親のtemplateタグの中身を
日常会話で表現するならば
「〇〇！『なにか言ってる』って思ってるんでしょうけど、”はやく寝なさい”と言っているの！」
でしょうか。
大体、調べると子が受け取るプロパティ名と親が渡すデータ名は同じなので、よくわからない”呪文”のように思っていたけど、仕組みがわかるとなるほど〜って感じがする。
そもそもカタカナが嫌い。

次はプロップスの中身を配列にしていく話をします。

#参考にしたもの
Vue.js公式 -プロパティ
Vueのpropsの使い方