プロップスとは
親コンポーネントから子コンポーネントにデータを渡す方法
大変な蛇足を交えながらメモしていきたいと思います。
親コンポーネントを準備
今回は親(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タグの中身を
日常会話で表現するならば
「〇〇！『なにか言ってる』って思ってるんでしょうけど、”はやく寝なさい”と言っているの！」
でしょうか。
大体、調べると子が受け取るプロパティ名と親が渡すデータ名は同じなので、よくわからない”呪文”のように思っていたけど、仕組みがわかるとなるほど〜って感じがする。
そもそもカタカナが嫌い。
次はプロップスの中身を配列にしていく話をします。