Vueと共通

【Nuxt.js】props基礎編:コンポーネントに自由にデータを渡そう

前置き

componentの内容を、
ページによって変えたいってこと、ありますよね?
親によって文字を変えたり、
buttonの色を変えたりできたら…!
そんな時に超便利なprops!
これを使えれば、
効率よく表現の幅を広げることができます😄

応用編ではオプションの使い方、
cssの付け替えをやっていく予定です。


propsって?メリットは?

propsは超簡単に説明すると、
親から子に自由にデータを渡せるものです。
は?と思った方、まずは超簡単な例を見てみましょう!

簡単な使い方

今回は分かりやすくテキストを表示させます。
スタイリングは省きますが
複雑なcssをあてていたら、何度も書くのが面倒ですよね。
cssを使いまわしてテキストだけ変えたい!
ということにしましょう。

直接テキストを渡す場合

) components

子で親からデータを受け取る
props: ['message']を用意します。
propsは空箱のようなものです📦

) pages

子のprops: ['message']に
親でHello Vue.js!のテキストを渡しています。
イメージは、
messageという空箱に
Hello Vue.js!というテキストを入れ込む感じ
です。


変数を使ってv-bindする場合

) components

変更なし

) pages

ん〜よく分からん😕
と思った方、
分かりやすく関係性を線で繋ぎました。

これで使い方は分かりましたね✨👩‍🎓👨‍🎓

子は使い回す前提です。
子自身のdataにテキストを入れてしまうと、
当然ですがそのテキストでしか表示されません。
だから子のdataを使うのではなく、
代わりに親でデータを保管し、
子の空いたdataを空箱propsにしちゃえば良いのです!

そして空箱を親で命名し、親のdataで呼び出します。


slotと一緒?

slotの記事を読んでくださった方は、
slotとほとんど一緒やんけ❗️😲
と思ったことでしょう。

はい、テキストを渡す時は一緒です。
つまりテキストを渡せれば良いならslotの方が便利です。
今回の例は誰にでも分かるようにテキストにしました。

ただし、
slotでは親によってcssの付け替えなどはできません。
テキスト以外はpropsです!


propsで使えるオプション

今回はテキスト(String)を例にしましたが
渡せるデータの種類は、真偽値や数値など様々です。
propsに種類を明記することで、
実際に渡されているデータの種類と一致しているかチェックしてくれます。
一致しなければconsoleエラーが出るので、確認しやすいです!
この場合はオブジェクト構文を使用します。

) components

オブジェクト構文で使えるオプションは4つ
type(データの種類):  String, Number, Booleanなど
required(必須項目かどうか): Boolean
default(初期値): any
validator(typeよりも細かく条件指定): Function

オプション: default

親からデータが渡されなかった場合の初期値を設定します。

データが渡されない場合

) components

) pages

データが渡された場合

) components

変更なし

) pages

ここまで出来れば基礎はバッチリです✨🤗

-Vueと共通
-,

© 2020 aLiz Nuxt