# vue: <Branch>
URL: https://generaltranslation.com/ja/docs/vue/reference/components/branch.mdx
---
title: "<Branch>"
description: 値に応じて条件付きでコンテンツをレンダリングします。<Branch> コンポーネントの API リファレンス。

---

`<Branch>` コンポーネントは、`branch` 値を文字列に変換し、その名前に対応する名前付きスロットをレンダリングします。代替コンテンツを翻訳する場合は、[`<T>`](/docs/vue/reference/components/t) 内に配置してください。

## 概要 [#overview]

ブランチ の値と、その値ごとに静的に名前を付けた スロット を指定します。

```vue
<Branch :branch="status">
  <template #active><p>The account is active.</p></template>
  <template #paused><p>The account is paused.</p></template>
  <template #default><p>The account status is unknown.</p></template>
</Branch>
```

## 仕組み [#how-it-works]

* **値の一致。** 文字列、数値、真偽値は `toString()` で変換されます。対応する名前付きスロットがレンダリングされます。
* **フォールバック。** prop は真偽値を受け取るため、Vue では `branch` を省略すると `false` として扱われます。`false` スロットが指定されている場合は、それがレンダリングされます。一致するブランチがない値では、デフォルトスロットがレンダリングされます。このコンポーネントは HTML ラッパーを追加しません。
* **静的抽出。** [`<T>`](/docs/vue/reference/components/t) 内では、サポートされているすべての名前付きスロットが翻訳用に抽出されますが、実行時にはアクティブなものだけがレンダリングされます。
* **スロットの優先順位。** 同じ名前の静的 primitive 属性より、名前付きスロットが優先されます。

## Props とスロット [#props]

| 名前                         | 説明                                   | 型                          | 任意 | デフォルト |
| -------------------------- | ------------------------------------ | ----------------------------- | -- | ------- |
| [`branch`](#branch)        | 名前付きブランチを選択するための値。               | `string \| number \| boolean` | はい | `false` |
| [`default`](#default-slot) | 一致するブランチがない場合にレンダリングされる Content。 | `VNodeChild`                  | はい | 空       |
| [`[value]`](#value-slots)  | 文字列化された個別のブランチ値に対応する Content。    | `VNodeChild`                  | はい | —       |

### `branch`

**型** `string | number | boolean` · **任意** · **デフォルト** `false`

選択に使用する値です。たとえば、`true` は `true` という名前のスロットを、`2` は `2` という名前のスロットを選択します。prop を省略した場合は `:branch="false"` と同様に動作し、`false` という名前のスロットが存在すればそれを選択し、存在しない場合はデフォルトスロットにフォールバックします。

### デフォルトスロット

**型** `VNodeChild` · **任意** · **デフォルト** 空

ブランチスロットまたはサポート対象のブランチ属性が選択された値に一致しない場合にレンダリングされるコンテンツ。

### 値スロット

**型** `VNodeChild` · **任意**

静的な名前を持つ各スロットは、文字列化された値の候補を 1 つ表します。[`<T>`](/docs/vue/reference/components/t) 内では、スロットは無条件で、静的な名前を持ち、スコープを持たない必要があります。動的なスロット名や、source の shape を変更するディレクティブはサポートされていません。

静的な primitive 属性を使用すると、スロットを使わずに単純なブランチを定義できます。

```vue
<Branch :branch="tone" formal="Welcome" casual="Hi" />
```

名前付きスロットともう一方の形式で同じ名前が使われている場合、名前付きスロットが優先されます。`class`、`style`、`data-*`、`aria-*`、リスナーなどの表示属性は、ブランチのコンテンツとしては扱われません。

## 例 [#examples]

```vue title="PlanMessage.vue"
<script setup lang="ts">
import { Branch, T, Var } from 'gt-vue';

defineProps<{ plan: string; accountName: string }>();
</script>

<template>
  <T>
    <Branch :branch="plan">
      <template #free><p>Upgrade to unlock more features.</p></template>
      <template #pro>
        <p>Thanks for going Pro, <Var>{{ accountName }}</Var>!</p>
      </template>
      <template #default><p>Welcome to your account.</p></template>
    </Branch>
  </T>
</template>
```

数に基づく言語ルールには、[`<Plural>`](/docs/vue/reference/components/plural) を使用します。