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

🎈 この記事はWPへ移行しました
【Nuxt.js】props基礎編：コンポーネントに自由にデータを渡そう

#前置き

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

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

# propsって？メリットは？

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

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

【表示結果】

【コード】

Component.vue // 子コンポーネント
<template>
 <div class="component">
   <p>{{ message }}</p>
 </div>
</template>

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

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

index.vue // 親ページ
<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>

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

これをv-bindで使うと

index.vue // 親ページ
<template>
 <div class="page">
   <Component
    :message="myMessage" //子のmessageを親ではmyMessageと名付ける
   >
   </Component>
  </div>
</template>

<script>
import Component from '~/components/Component.vue';
export default {
 data () {
  return {
   myMessage: 'Hello Vue.js!'
  }
 },
 components: {
   Component: Component,
 },
}
</script>

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

これで使い方は分かりましたね！

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

# slotと一緒？

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

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

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

# propsで使えるオプション

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

Component.vue // 子コンポーネント
<script>
export default {
 props: {
   message: {
     type: String,
     required: true,
   }
 },
}
</script>

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

# オプション: default

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

【表示結果】

データが渡されない場合

データが渡された場合

Component.vue // 子コンポーネント
<template>
 <div class="component">
   <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 props: {
   message: {
     type: String,
     default: 'ハロー！',
   }
 },
}
</script>

index.vue // 親ページ
<template>
 <div class="page">
   <Component />　//データを渡さないため、表示は「ハロー！」
  </div>
</template>

<script>
import Component from '~/components/Component.vue';
export default {
 components: {
   Component: Component,
 },
}
</script>

index.vue // 親ページ
<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>

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

props応用編では
・オプション: validator(ちょっと複雑なため)
・cssの付け替え
などをやっていく予定です！

🎈 この記事はWPへ移行しました
【Nuxt.js】props基礎編：コンポーネントに自由にデータを渡そう