Vue3コンポーネントの実装のしやすさについて Vision.10
Vue3のコンポーネントの実装について、前回はVue3コンポーネントの詳細から、
一方向のデータフローについて、まとめました。
前回：一方向のデータフロー
今回は、propsのバリデーションを以下にまとめます。
Vue3のコンポーネントの詳細6
公式ページ：propsのバリデーションを読み進めながら、以下のように解釈。
propsのバリデーション(入力値検証)
一方向のデータフローで記述した通り、コンポーネントではpropsに対する
オブジェクトの仕様を定義できます。仕様通りのオブジェクトを指定しない場合
propsはバリデーションエラーと扱われ、VueがブラウザーのJavaScriptコンソールで
エラーを発します。
他の人に使ってもらうことを想定したコンポーネントを開発する場合
開発者同士のコミュニケーションに寄らず、プログラム側で子コンポーネントへ
連携できる値を、一定程度制御できる点が便利です。
propsのバリデーションを指定するには、文字列の配列の代わりに
defineProps()を用いてバリデーション仕様を定義したオブジェクトを指定した例が
以下になります。
変更点も無かったので、公式ページのコードを抜粋
defineProps({
// 基本的な型チェック
// （`null` 値と `undefined` 値は、任意の型を許可します）
propA: Number,
// 複数の型の可能性
propB: [String, Number],
// 必須の文字列
propC: {
type: String,
required: true
},
// 必須だが null になる可能性がある文字列
propD: {
type: [String, null],
required: true
},
// デフォルト値を持つ数値
propE: {
type: Number,
default: 100
},
// デフォルト値を持つオブジェクト
propF: {
type: Object,
// オブジェクトと配列のデフォルトは、ファクトリー関数を使って
// 返す必要があります。ファクトリー関数は、コンポーネントが
// 受け取った未加工の props を引数として受け取ります。
default(rawProps) {
return { message: 'hello' }
}
},
// カスタムのバリデーター関数
// 3.4 以降、全てのpropsが第2引数として渡されます
propG: {
validator(value, props) {
// 値が以下の文字列のいずれかに一致する必要がある
return ['success', 'warning', 'danger'].includes(value)
}
},
// デフォルト値を持つ関数
propH: {
type: Function,
// オブジェクトや配列のデフォルトと異なり、これは
// ファクトリー関数ではなく、デフォルト値として機能する関数です
default() {
return 'Default function'
}
}
})
TIP
defineProps() の引数の中のコードは、コンパイル時に式全体が外側の
関数スコープに移されるため、<script setup>内で宣言している他の
変数にアクセスできません
その他の詳細
- required: true が指定されていない限り、propsは任意項目です。
- Boolean以外の任意項目のpropsは、値が指定されないと undefined値になります。
- Booleanのprops は、値が指定されないとfalseに変換されます。
これはdefaultを設定すると変更できます。
例えばdefault: undefinedとすると、非真偽値のpropsとして振る舞います。 -
default値を設定すると、propsの値がundefinedの場合に初期値として使用されます。propsが指定されなかった場合と、明示的にundefined値が渡された場合も該当します。
開発ビルド時
開発ビルドを使用する場合、propsのバリデーションでエラーになると
Vueがコンソールにエラー内容を出力します。
型のみのprops宣言
型のみのprops宣言を使用する場合、Vueは型アノテーションに基づいて
同等のランタイムprops宣言へのコンパイルをベストエフォートで試みます。
例えばdefineProps<{ msg: string }>
は{ msg: { type: String, required: true }}
にコンパイルされます。