前置き
componentの内容を、
ページによって変えたいってこと、ありますよね？
親によって文字を変えたり、
buttonの色を変えたりできたら…！
そんな時に超便利なprops！
これを使えれば、
効率よく表現の幅を広げることができます😄
応用編ではオプションの使い方、
cssの付け替えをやっていく予定です。
propsって？メリットは？
propsは超簡単に説明すると、
親から子に自由にデータを渡せるものです。
は？と思った方、まずは超簡単な例を見てみましょう！
簡単な使い方
今回は分かりやすくテキストを表示させます。
スタイリングは省きますが
複雑なcssをあてていたら、何度も書くのが面倒ですよね。
cssを使いまわしてテキストだけ変えたい！
ということにしましょう。
直接テキストを渡す場合
) components
子で親からデータを受け取る
props: ['message']を用意します。
propsは空箱のようなものです📦
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div class="component"> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script> |
) pages
子のprops: ['message']に
親でHello Vue.js!のテキストを渡しています。
イメージは、
messageという空箱に
Hello Vue.js!というテキストを入れ込む感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="page"> <Component message="Hello Vue.js!"></Component> </div> </template> <script> import Component from '~/components/Component.vue' export default { components: { Component: Component, }, } </script> |
変数を使ってv-bindする場合
) components
変更なし
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div class="page"> <Component :message="myMessage" //子のmessageを親ではmyMessageと名付ける > </Component> </div> </template> <script> import Component from '~/components/Component.vue' export default { components: { Component: Component, }, data () { return { myMessage: 'Hello Vue.js!' } }, } </script> |
ん〜よく分からん😕
と思った方、
分かりやすく関係性を線で繋ぎました。
これで使い方は分かりましたね✨👩🎓👨🎓
子は使い回す前提です。
子自身のdataにテキストを入れてしまうと、
当然ですがそのテキストでしか表示されません。
だから子のdataを使うのではなく、
代わりに親でデータを保管し、
子の空いたdataを空箱propsにしちゃえば良いのです！
そして空箱を親で命名し、親のdataで呼び出します。
slotと一緒？
slotの記事を読んでくださった方は、
slotとほとんど一緒やんけ❗️😲
と思ったことでしょう。
はい、テキストを渡す時は一緒です。
つまりテキストを渡せれば良いならslotの方が便利です。
今回の例は誰にでも分かるようにテキストにしました。
ただし、
slotでは親によってcssの付け替えなどはできません。
テキスト以外はpropsです！
propsで使えるオプション
今回はテキスト(String)を例にしましたが
渡せるデータの種類は、真偽値や数値など様々です。
propsに種類を明記することで、
実際に渡されているデータの種類と一致しているかチェックしてくれます。
一致しなければconsoleエラーが出るので、確認しやすいです！
この場合はオブジェクト構文を使用します。
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div class="component"> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true, } }, } </script> |
オブジェクト構文で使えるオプションは4つ
type(データの種類): String, Number, Booleanなど
required(必須項目かどうか): Boolean
default(初期値): any
validator(typeよりも細かく条件指定): Function
オプション: default
親からデータが渡されなかった場合の初期値を設定します。
データが渡されない場合
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div class="component"> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, default: 'ハロー！', } }, } </script> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <div class="page"> <Component /> //データを渡さないため、表示は「ハロー！」 </div> </template> <script> import Component from '~/components/Component.vue'; export default { components: { Component: Component, }, } </script> |
データが渡された場合
) components
変更なし
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div class="page"> <Component :message="myMessage" //データを渡しているため、表示は「Hello Vue.js!」 > </Component> </div> </template> <script> import Component from '~/components/Component.vue'; export default { data () { return { myMessage: 'Hello Vue.js!' } }, components: { Component: Component, }, } </script> |
ここまで出来れば基礎はバッチリです✨🤗