Vue.js propsの使い方~親から子へ値を渡す方法~
はじめに
SPAでページを作成していた際に、親コンポーネントから子コンポーネントへ値を渡すPropsを使用しました。
Propsについて簡単にまとめましたので、こちらを読んでいただければPropsについて基本的な使い方はわかるかと思います。
Propsとは
簡単にいうと、親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡すことができるものです。
基本的な使い方
今回はページのコンテンツタイトルをコンポーネント化した簡単な例です。
(親)
・コンポーネントの再利用
・v-bindを利用した場合
Vueのデータプロパティを利用して値を渡せます。その際はバインドをする必要があるのでtitleの前にv-bindを設定します。
・PropsのTypeを設定
ContentsTitleコンポーネントのpropsのtitleには、文字列が入るのでまずtypeにStringを設定します。Stringの先頭文字は大文字です。
小文字にするとエラーになります。
これでtitleにはString(文字列)が入ってくることを宣言しています。
違うタイプを渡すと、タイプが違うとGoogleコンソール上で警告が出ます。
typeの種類
String |
文字列 |
Number |
数値型 |
Array |
配列型 |
Boolean |
真偽値 |
Object |
オブジェクト型 |
Function |
関数 |
Date |
日付 |
null |
全て許容 |
undefined |
全て許容 |
・Propsのデフォルト値の設定
デフォルト値を指定せず、子コンポーネントに値を渡していない場合、
子コンポーネントには何も値が入っていない状態です。
そのような場合は何も表示されません。
Propsを必須にするにはrequiredを使用します。
required: trueを指定し、子コンポーネントに値を渡していない場合、Googleコンソール上で警告が出ます。
デフォルト値を指定している場合はpropsに値が必ず入るので、required: trueにしとく必要はありません。
Array型とobject型の注意点
ArrayとObject型の場合は、defaultの設定値は関数にする必要があります。
参考
https://reffect.co.jp/vue/vue-js-master-props-for-beginner
https://jp.vuejs.org/v2/guide/components-props.html