Skip to content

Commit

Permalink
document nullable types
Browse files Browse the repository at this point in the history
  • Loading branch information
splendente committed Apr 25, 2024
1 parent 20e0761 commit 48a596d
Showing 1 changed file with 51 additions and 8 deletions.
59 changes: 51 additions & 8 deletions src/guide/components/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -389,13 +389,18 @@ defineProps({
type: String,
required: true
},
// デフォルト値を持つ数値
// 必須だが null になる可能性がある文字列
propD: {
type: [String, null],
required: true
},
// デフォルト値を持つ数値
propE: {
type: Number,
default: 100
},
// デフォルト値を持つオブジェクト
propE: {
propF: {
type: Object,
// オブジェクトと配列のデフォルトは、ファクトリー関数を使って
// 返す必要があります。ファクトリー関数は、コンポーネントが
Expand All @@ -406,14 +411,14 @@ defineProps({
},
// カスタムのバリデーター関数
// 3.4 以降、全ての props が第 2 引数として渡されます
propF: {
propG: {
validator(value, props) {
// 値が以下の文字列のいずれかに一致する必要がある
return ['success', 'warning', 'danger'].includes(value)
}
},
// デフォルト値を持つ関数
propG: {
propH: {
type: Function,
// オブジェクトや配列のデフォルトと異なり、これは
// ファクトリー関数ではなく、デフォルト値として機能する関数です
Expand Down Expand Up @@ -444,13 +449,18 @@ export default {
type: String,
required: true
},
// デフォルト値を持つ数値
// 必須だが null になる可能性がある文字列
propD: {
type: [String, null],
required: true
},
// デフォルト値を持つ数値
propE: {
type: Number,
default: 100
},
// デフォルト値を持つオブジェクト
propE: {
propF: {
type: Object,
// オブジェクトと配列のデフォルトは、ファクトリー関数を使って
// 返す必要があります。ファクトリー関数は、コンポーネントが
Expand All @@ -461,14 +471,14 @@ export default {
},
// カスタムのバリデーター関数
// 3.4 以降、全ての props が第 2 引数として渡されます
propF: {
propG: {
validator(value, props) {
// 値が以下の文字列のいずれかに一致する必要がある
return ['success', 'warning', 'danger'].includes(value)
}
},
// デフォルト値を持つ関数
propG: {
propH: {
type: Function,
// オブジェクトや配列のデフォルトと異なり、これは
// ファクトリー関数ではなく、デフォルト値として機能する関数です
Expand Down Expand Up @@ -557,6 +567,39 @@ export default {

Vue は `instanceof Person` を使って、`author` props の値が本当に `Person` クラスのインスタンスであるかどうかを検証しています。

## null になる可能性がある型

もし型が必須だが null になる可能性がある場合、あなたは `null` を含む配列構文を使用することができます:

<div class="composition-api">

```js
defineProps({
id: {
type: [String, null],
required: true
}
})
```

</div>
<div class="options-api">

```js
export default {
props: {
id: {
type: [String, null],
required: true
}
}
}
```

</div>

もし配列構文を使用せずに `type``null` だけを指定する場合、任意の型を許可することに注意してください。

## 真偽値の型変換 {#boolean-casting}

`Boolean` 型の props は、ネイティブの真偽値の属性が振る舞う様子を模倣するために、特殊な型変換の規則を持っています。次のような宣言を含む `<MyComponent>` があるとします:
Expand Down

0 comments on commit 48a596d

Please sign in to comment.