# vue: <Branch>
URL: https://generaltranslation.com/ru/docs/vue/reference/components/branch.mdx
---

title: "<Branch>"
description: Условно отображает содержимое в зависимости от значения. Справочник API компонента <Branch>.

---

Компонент `<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]

* **Сопоставление значений.** Значения string, number и boolean преобразуются с помощью `toString()`. Отображается соответствующий именованный слот.
* **Резервный вариант.** Поскольку prop принимает булевы значения, Vue интерпретирует отсутствующий `branch` как `false`; если слот `false` задан, отображается он. Для любого значения без соответствующей ветки отображается слот по умолчанию. Компонент не добавляет HTML-обёртку.
* **Статическое извлечение.** Внутри [`<T>`](/docs/vue/reference/components/t) каждый поддерживаемый именованный слот извлекается для перевода, а при рендеринге выбирается только активный.
* **Приоритет слотов.** Именованный слот имеет приоритет над статическим примитивным атрибутом с тем же именем.

## Пропсы и слоты [#props]

| Имя                        | Описание                                                   | Тип                           | Необязательно | По умолчанию |
| -------------------------- | ---------------------------------------------------------- | ----------------------------- | ------------- | ------------ |
| [`branch`](#branch)        | Значение для выбора именованной ветки.                     | `string \| number \| boolean` | Да            | `false`      |
| [`default`](#default-slot) | Содержимое, отображаемое, если ни одна ветка не совпадает. | `VNodeChild`                  | Да            | Пусто        |
| [`[value]`](#value-slots)  | Содержимое для одного строкового значения ветки.           | `VNodeChild`                  | Да            | —            |

### `branch`

**Тип** `string | number | boolean` · **Необязательно** · **По умолчанию** `false`

Значение, используемое для выбора. Например, `true` выбирает слот с именем `true`, а `2` — слот с именем `2`. Если проп не указан, это равносильно `:branch="false"`: выбирается слот с именем `false`, если он существует, в противном случае используется слот по умолчанию.

### Слот по умолчанию

**Тип** `VNodeChild` · **Необязательно** · **По умолчанию** Пусто

Содержимое, отображаемое, если ни слот ветки, ни поддерживаемый атрибут ветки не соответствует выбранному значению.

### Слоты значений

**Тип** `VNodeChild` · **Необязательный**

Каждый статически заданный слот представляет одно из возможных значений в строковом виде. Внутри [`<T>`](/docs/vue/reference/components/t) слоты должны быть безусловными, иметь статические имена и не использовать область видимости; динамические имена слотов и директивы, изменяющие структуру исходного текста, не поддерживаются.

Статические примитивные атрибуты позволяют определять простые ветки без слотов:

```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).