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

title: "<Branch>"
description: Muestra contenido de forma condicional según un valor. Referencia de la API del componente <Branch>.

---

El componente `<Branch>` convierte su valor de `branch` en una cadena y muestra el slot con ese nombre. Colócalo dentro de [`<T>`](/docs/vue/reference/components/t) cuando sus alternativas deban traducirse.

## Descripción general [#overview]

Proporciona un valor de rama y slots con nombres estáticos para sus posibles valores:

```vue
<Branch :branch="status">
  <template #active><p>La cuenta está activa.</p></template>
  <template #paused><p>La cuenta está en pausa.</p></template>
  <template #default><p>Se desconoce el estado de la cuenta.</p></template>
</Branch>
```

## Cómo funciona [#how-it-works]

* **Coincidencia de valores.** Los valores de cadena, número y booleanos se convierten mediante `toString()`. Se renderiza el slot con nombre correspondiente.
* **Contenido alternativo.** Como la prop acepta valores booleanos, Vue interpreta un `branch` omitido como `false`; si se proporciona, se renderiza un slot `false`. Cualquier valor que no tenga una rama coincidente renderiza el slot predeterminado. El componente no añade ningún contenedor HTML.
* **Extracción estática.** Dentro de [`<T>`](/docs/vue/reference/components/t), se extraen para su traducción todos los slots con nombre compatibles, mientras que el renderizado en tiempo de ejecución selecciona solo el activo.
* **Precedencia de slots.** Un slot con nombre tiene prioridad sobre un atributo primitivo estático con el mismo nombre.

## Props y slots [#props]

| Nombre                     | Descripción                                              | Tipo                          | Opcional | Predeterminado |
| -------------------------- | -------------------------------------------------------- | ----------------------------- | -------- | -------------- |
| [`branch`](#branch)        | Valor utilizado para seleccionar una rama con nombre.    | `string \| number \| boolean` | Sí       | `false`        |
| [`default`](#default-slot) | Contenido que se renderiza cuando ninguna rama coincide. | `VNodeChild`                  | Sí       | Vacío          |
| [`[value]`](#value-slots)  | Contenido para un valor de rama convertido en cadena.    | `VNodeChild`                  | Sí       | —              |

### `branch`

**Tipo** `string | number | boolean` · **Opcional** · **Predeterminado** `false`

El valor utilizado para la selección. Por ejemplo, `true` selecciona un slot llamado `true` y `2` selecciona un slot llamado `2`. Si se omite la prop, se comporta como `:branch="false"`: selecciona un slot llamado `false` si existe y, de lo contrario, usa el slot predeterminado.

### Slot predeterminado

**Tipo** `VNodeChild` · **Opcional** · **Predeterminado** Vacío

Contenido que se renderiza cuando ningún slot de rama ni ningún atributo de rama compatible coincide con el valor seleccionado.

### Slots de valor

**Tipo** `VNodeChild` · **Opcional**

Cada slot con nombre estático representa un posible valor convertido en cadena. Dentro de [`<T>`](/docs/vue/reference/components/t), los slots deben ser incondicionales, tener nombres estáticos y no tener ámbito; no se admiten nombres de slot dinámicos ni directivas que cambien la estructura de la fuente.

Los atributos primitivos estáticos pueden definir ramas simples sin slots:

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

Los slots con nombre tienen prioridad cuando ambas formas usan el mismo nombre. Los atributos de presentación, como `class`, `style`, `data-*`, `aria-*` y los listeners, no se consideran contenido de la rama.

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

Para aplicar reglas lingüísticas según el conteo, usa [`<Plural>`](/docs/vue/reference/components/plural).