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

title: "<Branch>"
description: 根据值有条件地渲染内容。<Branch> 组件的 API 参考。

---

`<Branch>` 组件会将其 `branch` 值转换为字符串，并渲染名称与该字符串相同的命名插槽。如果其候选内容需要翻译，请将其放在 [`<T>`](/docs/vue/reference/components/t) 内。

## 概览 [#overview]

为 branch 指定一个值，并为其可能的取值提供静态命名的插槽：

```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) 内，所有受支持的命名插槽都会被提取用于翻译，而运行时仅渲染当前选中的插槽。
* **插槽优先级。**命名插槽的优先级高于同名的静态原始类型属性。

## 属性和插槽 [#props]

| 名称                         | 描述              | 类型                            | 可选 | 默认值     |
| -------------------------- | --------------- | ----------------------------- | -- | ------- |
| [`branch`](#branch)        | 用于选择指定分支的值。     | `string \| number \| boolean` | 是  | `false` |
| [`default`](#default-slot) | 未匹配任何分支时渲染的内容。  | `VNodeChild`                  | 是  | 空       |
| [`[value]`](#value-slots)  | 对应某个字符串化分支值的内容。 | `VNodeChild`                  | 是  | —       |

### `branch`

**类型** `string | number | boolean` · **可选** · **默认值** `false`

用于选择的值。例如，`true` 会选择名为 `true` 的插槽，`2` 会选择名为 `2` 的插槽。省略该 prop 时，其行为等同于 `: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)。