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

title: "<Branch>"
description: Affiche le contenu de façon conditionnelle en fonction d’une valeur. Référence de l’API du composant <Branch>.

---

Le composant `<Branch>` convertit sa valeur `branch` en chaîne de caractères et affiche le slot nommé correspondant. Placez-le dans [`<T>`](/docs/vue/reference/components/t) lorsque ses alternatives doivent être traduites.

## Vue d’ensemble [#overview]

Indiquez une valeur de branche et des slots nommés statiquement pour ses valeurs possibles :

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

## Fonctionnement [#how-it-works]

* **Correspondance des valeurs.** Les valeurs de type chaîne, nombre ou booléen sont converties avec `toString()`. Le slot nommé correspondant est affiché.
* **Contenu de secours.** Comme la prop accepte les booléens, Vue considère qu’une `branch` omise vaut `false` ; un slot `false` est affiché s’il est fourni. Toute valeur sans branche correspondante affiche le slot par défaut. Le composant n’ajoute aucun conteneur HTML.
* **Extraction statique.** Dans [`<T>`](/docs/vue/reference/components/t), chaque slot nommé pris en charge est extrait à des fins de traduction, tandis que le rendu à l’exécution ne sélectionne que celui qui est actif.
* **Priorité des slots.** Un slot nommé prévaut sur un attribut primitif statique du même nom.

## Props et slots [#props]

| Nom                        | Description                                                  | Type                          | Facultatif | Par défaut |
| -------------------------- | ------------------------------------------------------------ | ----------------------------- | ---------- | ---------- |
| [`branch`](#branch)        | Valeur utilisée pour sélectionner une branche nommée.        | `string \| number \| boolean` | Oui        | `false`    |
| [`default`](#default-slot) | Contenu affiché lorsqu&#39;aucune branche ne correspond.     | `VNodeChild`                  | Oui        | Vide       |
| [`[value]`](#value-slots)  | Contenu associé à une valeur de branche convertie en chaîne. | `VNodeChild`                  | Oui        | —          |

### `branch`

**Type** `string | number | boolean` · **Facultatif** · **Par défaut** `false`

Valeur utilisée pour la sélection. Par exemple, `true` sélectionne un slot nommé `true`, et `2` sélectionne un slot nommé `2`. Si la prop est omise, le comportement est le même qu’avec `:branch="false"` : un slot nommé `false` est sélectionné s’il existe, sinon le slot par défaut est utilisé.

### Slot par défaut

**Type** `VNodeChild` · **Facultatif** · **Par défaut** Vide

Contenu affiché lorsqu’aucun slot de branche ni attribut de branche pris en charge ne correspond à la valeur sélectionnée.

### Slots de valeurs

**Type** `VNodeChild` · **Facultatif**

Chaque slot nommé statiquement représente une valeur possible convertie en chaîne de caractères. Dans [`<T>`](/docs/vue/reference/components/t), les slots doivent être inconditionnels, nommés statiquement et non scopés ; les noms de slot dynamiques et les directives qui modifient la structure de la source ne sont pas pris en charge.

Les attributs primitifs statiques permettent de définir des branches simples sans slots :

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

Les slots nommés sont prioritaires lorsque les deux formes portent le même nom. Les attributs de présentation tels que `class`, `style`, `data-*`, `aria-*` ainsi que les écouteurs ne sont pas considérés comme du contenu de branche.

## Exemples [#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>
```

Pour les règles linguistiques basées sur un nombre, utilisez [`<Plural>`](/docs/vue/reference/components/plural).