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編です！

参考文献