Vue Basic Props

by Anthony Fu @antfu

この問題は 6 - Simple Vue の続きです。 先にその問題を解いた上で、そこで得られるコードを基盤にしてこの問題に取り組んでください。

Simple Vue に加え、我々は 新しく props フィールドをオプションとして利用できます。これは Vue の props オプションを更に簡潔にしたものです。利用するにはいくつかのルールがあります。

props は、 this に挿入された各々のフィールドをキーをとして保持するオブジェクトです。挿入された props は data,computed, methods などを始めとした 全ての環境からアクセス可能になります。

prop は コンストラクタ、または コンストラクタを含んだ type フィールドを持つオブジェクトで定義されます。

例)

props: {
  foo: Boolean
}
// or
props: {
  foo: { type: Boolean }
}

これらは type Props = { foo: boolean } であると推測されます。

複数の型を渡した場合、Props の型は ユニオン型として推測されます。

props: {
  foo: { type: [Boolean, Number, String] }
}
// -->
type Props = { foo: boolean | number | string }

空のオブジェクトが渡された場合、対象のkeyは any 型として推測されます。

より具体的なケースについては, Test Cases セクションを参照してください。

Vue の required, default, そして 配列の props はこの問題において考慮されておりません.

関連する課題