Vueを使用すると、コンポーネントにプロパティを簡単に追加できますが、コンポーネントに許可されるものの種類をもう少し制御する必要がある場合があります。 ありがたいことに、Vueには、タイプチェック、検証、デフォルト値、および制約をprop定義に追加するための組み込みの方法が用意されています。

タイプチェック

type プロパティを追加することで、プロパティ定義にタイプチェックを簡単に追加できます。

たとえば、次のコンポーネントは、可能な入力値を数値に制限します。

ChildComponent.vue
<template>
  <h2>Numerical Property {{imperfectNumber}}</p>
</template>

<script>
export default {
  props: {
    imperfectNumber: {
      type: Number
    }
  }
}
</script>
ParentComponent.vue
<template>
  <child-component :imperfectNumber="41"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

許可されるタイプ値は次のとおりです。

  • Object :myProp =“ {key:’value’}”などのオブジェクトのみを許可します。
  • Array :myProp =“ [1、2、3]”などの配列のみを許可します。
  • Function *:myProp =“ function(test){return test.toUpperCase()}”などの関数のみを渡すことができます。
  • String :myProp =“’Example’” (または、より単純に、 myProp =“ Example” )などの文字列のみを許可します。
  • Number :myProp =“ 103.4”などの数値のみを許可します。
  • Boolean :myProp =“ true” など、trueまたはfalseの値のみを許可します。
  • [任意のコンストラクター関数]-クラスまたはコンストラクター関数を渡すこともでき、それらの関数のインスタンスである小道具を許可します。

デフォルト値

プロパティ定義にrequired:true 値を追加することにより、プロパティを強制的に必須にすることができます。

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

または、プロパティのデフォルト値を設定することもできます。このデフォルト値は、値が渡されない場合に使用されます。

props: {
  imperfectNumber: {
    type: Number,
    default: 43
  }
}

動的なデフォルト値を生成する関数に設定することもできます!

props: {
  imperfectNumber: {
    type: Number,
    default: () => Math.random()
  }
}

カスタムバリデーター

より複雑なオブジェクトの場合は、カスタムバリデーター関数を追加することもできます。 バリデーターは、入力プロパティ値を受け取り、ブール値を返す関数です。有効な場合は true 、それ以外の場合はfalseです。

props: {
  imperfectNumber: {
    type: Number,
    validator: value => {
      // Only accepts values that contain the string 'cookie-dough'.
      return value.indexOf('cookie-dough') !== -1
    }
  }
}

これらのプロパティを組み合わせることで、ユーザーがコンポーネントにスローする可能性のあるほぼすべての値を堅牢に処理し、理解を非常に簡単に使用できるようになります。 :D