【Vue】propsのtypeとは何か？プロパティ設定時の注意点と使い方を実例で解説｜type, default, required, validation（自分でバリデーションを作成する方法）

親から子テンプレートにdataオブジェクトで指定したデータを引き渡す際に、子にpropsオブジェクトを定義して、その中で受け取るプロパティを記述します。

その際、引き渡すデータの型や、必須かどうか、デフォルト値などのバリデーションを加えることができます。

各指定方法には様々な書き方があったり、正しくかかないとエラーになったりするので注意が必要です。

ここでは、type, default, requiredを使ったpropsのプロパティのバリデーション方法や注意点を実例でまとめています。

propsで設定できるバリデーション

propsで設定できるバリデーションは以下の４つです。

typeの設定方法

typeとは何か？使い方

typeは親コンポーネントから受け取るデータの型を指定するバリデーションです。

基本形は以下になります。

プロパティ名: { type: 型 }

実例

  props: {
    msg: {type: String}
  },

指定方法がいくつかあり、ぱっと見複雑に見えるものでもあります。

大きくわけると、以下の２つに分かれます。

typeで設定できる型の一覧

typeで設定できる型は以下の通りです。

typeのポイントと注意点

typeのみで他のバリデーションが無い場合

typeのみで他のバリデーションが無い場合は、typeの記述を省略して型のみを記述できます。

型を一つだけ指定する場合

プロパティ名: 型

▼実例

  props: {
    msg: String
  },

type省略で配列で指定

プロパティ名: [ 型1, 型2,,,, ]

▼実例

  props: {
    test: [ String, Number, Boolean ]
  },

他のバリデーションと合わせて使う場合

他のバリデーションと合わせて使う場合は「type:」の記述が必須となります。

typeを１つだけ指定する場合

プロパティ名: { type: 型 }

実例

  props: {
    msg: { 
      type: String,
      default: "初期メッセージ",
      required: true 
    }
  },

複数指定する場合

プロパティ名: { type: [ 型1, 型2,,, ] }

▼実例

  props: {
    test: { 
      type: [ String, Number, Boolean ],
      default: "初期メッセージ",
      required: true 
    }
  },

typeを使って一つづつ指定はできない

プロパティの値にtypeを複数記述することはできません。エラーになります。

プロパティ名: { type: 型1, type: 型2,,, ] }

▼実例

  props: {
    test: { type: String, type: Number, type: Boolean }
  },

このようにすると以下のようなエラーが発生します。

error  Duplicate key 'type'  no-dupe-keys

他のバリデーションのみでtypeが無い場合

defaultやrequiredなど他のバリデーションのみでtypeが無い場合は、null/undefinedと同じで全ての型を許容となります。

    number: {
      required: true
    }

実例：全て許容する

null, undefinedの他に、{}（未指定）とすることで、全ての型を許容することになります。

export default {
  props:{
    text: undefined,
  }
}

空の配列を指定するとエラーになる

[ ]だけにすると、型がないものを指定したことになりエラーとなります。

[Vue warn]: Invalid prop: type check failed for prop "arrs". Expected , got Array

type設定事例

export default {
  props:{
    text: String,  //[String]や {type: String} も同じ
    numbers: [String, Number, Array],
    free: undefined, //nullも同じ,
    arr: Array,
    obj: Object
  }
}

コードリーディングのしやすさを重視する場合は、typeをつけると初心者にもわかりやすくなります。

export default {
  props:{
    arrs: {
      type: Array,
      default: () => []
    },
    value: {
      type:[String, Number],
      required: true
    },
  }
}

typeバリデーションに合わない場合の警告例

指定した型と合わない場合は警告が出ます。

なお、画面は型が合わなくても表示されます。エラーが表示されるかの違いです。

[Vue warn]: Invalid prop: type check failed for prop "text". Expected Number with value NaN, got String with value "Stringです".

上記はNumber型を指定しているのに、Stringが渡されているとの警告。

defaultの設定方法

defaultとは何か？

defaultは親コンポーネントから子コンポーネントに指定したデータが受け渡されていなくても、エラーにならずに使える便利な機能です。

通常親のテンプレートから子のテンプレートに対して、:msg="msg"といったようにv-bindでデータを渡す必要があります。

ところが、propsの中のプロパティにdefaultを設定しておけば、親子のコンポーネントから子コンポーネントにデータが渡されていなくても、子のコンポーネントの中で、propsで指定したプロパティが使えます。

defaultの使い方

defaultの使い方は大きく次の2種類に分かれます。

配列とオブジェクト以外（String, Number, Booleanなど）

1つ目は配列とオブジェクト以外（String, Number, Booleanなど）です。

この場合は、通常のプロパティの値を指定するとうに、defaultの後ろに値を記述します。

プロパティ名{ default: 値 }

実例

export default {
  props:{
    text: { type:String, default:"デフォルトの値です" },
    numbers: {type:[Number], default:100 },
  }
}

配列とオブジェクト（ArrayとObject）

配列とオブジェクト（ArrayとObject）は関数で記述する必要があります。

 default: function () {
        return 値
}

functionを省略して、アロー関数で記述することもできます。

 default: () => 値

実例

 default: function () {
        return { message: 'hello' }
}

　↑↓ 同じ

 default: () => { message: 'hello' }

なお、配列を指定する場合は以下のようになります。

export default {
  props:{
    arr: {default:()=>[]},
    arr2: {default:()=>[ 111, 222, 333 ]},
  }
}

関数を設定しない場合のエラー

defaultで関数やオブジェクトを指定するときに、関数としない場合は以下のようなエラーが発生します。

Props with type Object/Array must use a factory function to return the default value.

default以外のバリデーションも合わせて設定する方法

defaultと合わせて、typeなどの型の指定やrequiredなどの他のバリデーションも設定する場合は、プロパティの値はオブジェクト形式で記述する必要があります。

実例

  props: {
    number: {
      type: Number,
      default: 100,
      required: true
    }
  },

requiredの設定方法

requiredとは何か？使い方

requiredのバリデーションを設定すると、指定したプロパティが親コンポーネントから子コンポーネントから渡されることが必須となります。

プロパティ名: { required: true }

バリデーションによる警告の実例

required:trueを設定した変数が親から渡されていない場合はコンソールに警告が表示されます。

以下のように「arrs」という変数に対して「required:true」を設定したときの警告は次の通りです。

export default {
  props:{
    arrs: {type:[Array], required:true}
  }
}

[Vue warn]: Missing required prop: "arrs"

required以外のバリデーションも合わせて設定する方法

requiredと合わせて、typeなどの型の指定など他のバリデーションも設定する場合は、プロパティの値をオブジェクト形式で記述する必要があります。

実例

  props: {
    number: {
      type: Number,
      required: true
    }
  },

自分でバリデーションを作成する｜validator

validatorを使うと自分でバリデーションを作成することもできます。

    プロパティ名: {
      validator: (引数) => {
           処理
      }
    }

　↑↓ 同じ（functionありの場合）

    プロパティ名: {
      validator: function(引数){
           処理
      }
    }

実例

    status: {
      validator: (value) => {
        // プロパティの値は、必ずいずれかの文字列でなければならない
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }

参考リンク

＞vue公式プロパティページへのリンク