props編👈今ここ
slot編
実装編
はじめに
どうすれば再利用可能なコンポーネントを実装することができるのか？
必要になるのは「props」と「slot」です。
今まで型指定のみで、他の指定方法があることすら知りませんでした。この記事では「props」について理解を深めようと思います。
バージョン
Vue.js 2.6.11
結論
propsは3つのプロパティを理解しよう！
詳細
親から子にデータを引き渡す際に、子にpropsオプションとして属性を定義でき、
その際に、引き渡すデータの型指定・必須項目かどうか・デフォルト値など様々な指定できます。
プロパティの種類
propsでは3つのプロパティを設定することができます。
-
type: データの方を指定 -
default: 初期値の設定。親からデータが渡されない場合に使用 -
validator: データ必須。値は真偽値で指定
Vue公式を参考に3つのプロパティの設定を確認していきます。
https://jp.vuejs.org/v2/guide/components-props.html
typeの設定方法
- 型を複数設定することが可能
- 複数設定した場合は指定した型を許容する
プロパティ名（type）を記載しなくても、typeとして判断してくれます。
<script>
export default {
props: {
// 基本的な型の検査 (`null` と `undefined` は全てのバリデーションにパスします)
propsA: Number,
// 複数の型の許容
propsB: [String, Number],
// 文字列型を必須で要求する
propC: {
type: String,
required: true
},
}
}
</script>
データ型一覧
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- null（全て許容）
- undefined（全て許容）
全てを許容する
null, undefinedの他に、{}とすることで全て許容と同じになります。
<script>
export default {
props: {
propsD: {},
}
}
</script>
defaultの設定方法
defaultオブジェクトは親から子に指定したデータが受け渡されていなくても、エラーにならずにデフォルト値（既定値）を指定します。
<script>
export default {
props: {
// デフォルト値つきの数値型
propsE: {
type: Number,
default: 1000
},
// デフォルト値つきのオブジェクト型
propF: {
type: Object,
// オブジェクトもしくは配列のデフォルト値は
// 必ずそれを生み出すための関数を返す必要があります。
// 関数を設定しない場合のエラー
default: () => {
return { message: 'hello, Vue.js' }
}
}
}
}
</script>
requiredの設定方法
requiredを設定することで、そのデータの受け渡しを必須（親からpropsに必ずデータが指定される）かどうか指定できます。指定する値はBoolean型のtrueまたはfalseの真偽値を指定します。
<script>
export default {
props: {
// カスタマイズしたバリデーション関数
propG: {
validator: (value) => {
// プロパティの値は、必ずいずれかの文字列でなければならない
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
}
</script>
includesメソッドを使ったバリデーション関数
好みの問題ですが、includes()を使って書くと以下のようになります。
validator: (value) => {
['success', 'warning', 'danger'].includes(value)
}
// もっと簡潔に
validator: (value) => ['success', 'warning', 'danger'].includes(value)
最後に
参考にどうぞ！
次回はslot編です！
参考文献