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

title: "<T>"
description: 原地翻译 Vue 模板内容。<T> 组件的 API 参考。

---

`<T>` 组件从默认插槽中读取静态编写的内容，并渲染匹配的富内容目录条目。若条目缺失，则渲染原始插槽内容，且该组件不会添加 HTML 包装元素。

## 概览 [#overview]

将应作为一个翻译单元的文本和标记包裹起来：

```vue
<T>
  Today, I went to the <strong>store</strong>.
</T>
```

运行时值请使用 [`<Var>`](/docs/vue/reference/components/var)、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency) 和 [`<DateTime>`](/docs/vue/reference/components/datetime)。备选内容请使用 [`<Plural>`](/docs/vue/reference/components/plural) 或 [`<Branch>`](/docs/vue/reference/components/branch)。

## 工作原理 [#how-it-works]

* **静态提取。** CLI 会提取字面模板结构、翻译元数据、受支持的文本属性以及所有受支持的分支。会生成翻译内容的运行时表达式必须包裹在变量组件中；普通组件属性和监听器仍为运行时值。
* **目录查找。** 该组件会对其源结构和元数据计算哈希值，然后从活动插件的目录中读取相应条目。缺失或不兼容的条目会回退到源 插槽。
* **响应式渲染。** 使用 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件时，加载新目录或更改区域设置会重新渲染查找结果。由 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 返回的插件会在挂载前预加载，并通过重新加载页面来更改区域设置。
* **Fragment 根节点。** 该组件始终返回一个 Vue Fragment 边界。它不会插入 DOM 元素，翻译输出可以包含零个、一个或多个子元素，而不会改变该组件边界。

`<T>` 不处理 ICU 语法，也不对占位符进行插值。请将每个动态值放入相应的变量组件中。

## 属性和插槽 [#props]

| 名称                                  | 说明             | 类型           | 可选 | 默认值     |
| ----------------------------------- | -------------- | ------------ | -- | ------- |
| [`default`](#default-slot)          | 要翻译的静态模板内容。    | `VNodeChild` | 是  | 空       |
| [`context`](#context)               | 用于区分相同源内容的上下文。 | `string`     | 是  | —       |
| [`id`](#id)                         | 已弃用的兼容性元数据。    | `string`     | 是  | —       |
| [`maxChars`](#maxchars)             | 翻译的最大请求长度。     | `number`     | 是  | —       |
| [`requiresReview`](#requiresreview) | 将该条目标记为需要人工审校。 | `boolean`    | 是  | `false` |

### 默认插槽

**类型** `VNodeChild` · **可选** · **默认值** 空

用于构成翻译内容的文本、元素、组件和支持的分支。除使用变量组件包装的值外，编写的内容必须为静态内容。

### `context`

**类型** `string` · **可选**

计算内容哈希时使用的静态上下文。当同一源文本在不同语境下需要不同译文时，可使用此项，例如 `"Open"` 用作动词或形容词时。

```vue
<T context="Button that opens the settings panel">Open</T>
```

### `id`

**类型** `string` · **可选** · **已弃用**

为从 React API 改编的代码提供兼容性元数据。它不能替代 Vue 基于内容的 目录 hash，也不应作为稳定的翻译内部标识符使用。

### `maxChars`

**类型** `number` · **可选**

向翻译工具指定的最大字符数。这是翻译元数据；Vue 运行时不会截断渲染后的输出。

在模板中使用静态绑定的整数：

```vue
<T :max-chars="80">Save your changes</T>
```

### `requiresReview`

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

将该翻译条目标记为需要人工审校。这是翻译元数据，不会自行改变渲染结果。

```vue
<T requires-review>Terms and conditions apply.</T>
```

## 模板规则 [#template-rules]

保持源内容结构确定，以确保提取与运行时渲染一致：

* 不要在一个 `<T>` 中嵌套另一个 `<T>`。
* 将所有会作为翻译内容渲染的插值及其他运行时值包裹在变量组件中。
* 将 `v-if`、`v-else-if`、`v-else` 和 `v-for` 移到翻译内容之外，或使用 [`<Branch>`](/docs/vue/reference/components/branch) 或 [`<Plural>`](/docs/vue/reference/components/plural) 表示不同分支。
* 不要在翻译内容中使用 `v-html`、`v-text` 或 `<slot>`。
* 自定义组件应使用直接标签。`<component :is="...">` 和 `is="vue:..."` 等选择器形式仅支持已识别的 GT 组件，或提取器能够显式解析的受支持 Vue 内置组件；不支持任意自定义、运行时选择或无法解析的选择器。
* `context` 和 `id` 必须为静态字符串，`maxChars` 必须为静态绑定的整数，`requiresReview` 必须为静态布尔值或无值属性。

当 HTML 元素和自定义组件上的静态 `placeholder`、`title`、`alt`、`aria-label`、`aria-labelledby` 和 `aria-describedby` 属性，其编写时和翻译后的子值均通过运行时真值检查时，这些属性会参与翻译。无子元素的元素 (如 `<img>`) ，以及源子值或翻译后子值为假值的节点，会保留其源属性。请使用 [`useGT()`](/docs/vue/reference/composables/use-gt) 单独翻译这些元素上的文本属性。在 `<T>` 内不支持这些文本属性的动态版本。

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

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

<template>
  <T>
    Hello, <Var>{{ name }}</Var>!
  </T>
</template>
```

## 组件边界 [#components]

在自定义组件内静态编写的默认插槽内容仍属于周围待翻译内容的一部分。Vue 会保留组件、不可翻译的运行时属性、监听器和 identity，同时替换其默认插槽内容及受支持的静态文本属性：

```vue
<T>
  <DocsLink to="/docs">Read the documentation</DocsLink>
</T>
```

在 `DocsLink` 实现内部创建的内容不会被外层翻译识别。自定义组件请使用直接标签。选择器形式仅限提取器能够显式解析的已识别 GT 组件和受支持的 Vue 内置组件；任意自定义、运行时选择或无法解析的选择器均不属于翻译源。

对于带作用域或任意具名插槽的自定义组件，请改在插槽内放置 `<T>`。你还可以使用 [`<Var>`](/docs/vue/reference/components/var) 包裹不透明的动态组件边界。

字面量 `<Suspense>` 边界支持静态的单根默认插槽。默认插槽内容会参与外层翻译，而后备内容插槽会被保留但不参与翻译。当边界是动态的，或以提取器无法解析的方式使用别名时，请在默认插槽和后备内容插槽中分别放置 `<T>` 组件。

## 空白字符 [#whitespace]

Vue&#39;s 模板编译器决定是压缩还是保留源文本中的空白字符。提取器使用使用方应用的 Vue 编译器设置，因此更改编译器的 `whitespace` 选项可能会改变源内容及其哈希值。

请将有意义的空格显式以内联方式保留：

```vue
<T>Hello <strong>world</strong>!</T>
```

避免在 `<T>` 内使用拆分文本的注释，或让注释紧邻有意义的空白字符。Vue 在不同构建中保留注释的方式可能不同，因此提取器会拒绝导致翻译哈希值依赖于构建的情况。