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

title: "<T>"
description: Перевод содержимого шаблонов Vue на месте. Справочник API компонента <T>.

---

Компонент `<T>` получает статически заданное содержимое из слота по умолчанию и отображает соответствующую запись каталога форматированного содержимого. Если запись отсутствует, отображается исходное содержимое слота; компонент не добавляет HTML-обёртку.

## Обзор [#overview]

Оберните в компонент текст и разметку, которые должны составлять единый перевод:

```vue
<T>
  Сегодня я сходил в <strong>магазин</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, основанный на содержимом, и не должны использоваться в качестве стабильного идентификатора перевода.

### `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>` в другой.
* Оборачивайте каждую интерполяцию и другие значения времени выполнения, отображаемые как переведённый контент, в компонент переменной.
* Выносите `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` — как статическое логическое значение или атрибут без значения.

Статические пропсы `placeholder`, `title`, `alt`, `aria-label`, `aria-labelledby` и `aria-describedby` у HTML-элементов и пользовательских компонентов участвуют в переводе, если и исходные, и переведённые дочерние значения проходят проверку на истинность во время выполнения. Элементы без дочерних элементов, такие как `<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>
    Привет, <Var>{{ name }}</Var>!
  </T>
</template>
```

## Границы компонентов [#components]

Статическое содержимое слота по умолчанию, заданное внутри пользовательского компонента, остаётся частью окружающего перевода. Vue сохраняет компонент, непереводимые пропсы времени выполнения, обработчики событий и идентификатор, заменяя содержимое слота по умолчанию и поддерживаемые статические текстовые пропсы:

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

Контент, созданный внутри реализации `DocsLink`, не виден внешнему механизму перевода. Для пользовательского компонента используйте прямой тег. Формы селекторов ограничены распознаваемыми компонентами GT и поддерживаемыми встроенными компонентами Vue, которые экстрактор явно разрешает; произвольные пользовательские селекторы, селекторы, выбираемые во время выполнения, и неразрешённые селекторы не являются источниками для перевода.

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

Литеральные границы `<Suspense>` поддерживают статический слот по умолчанию с одним корневым элементом. Контент этого слота участвует во внешнем переводе, а резервный слот сохраняется, но исключается из него. Помещайте отдельные компоненты `<T>` внутрь слотов по умолчанию и резервного, если граница является динамической или использует алиас, который экстрактор не может разрешить.

## Пробелы [#whitespace]

Компилятор шаблонов Vue определяет, сжимать или сохранять пробелы в исходном тексте. Экстрактор использует настройки компилятора Vue в приложении-потребителе, поэтому изменение параметра `whitespace` компилятора может изменить исходный контент и его хеш.

Явно указывайте значимые пробелы непосредственно в коде:

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

Не размещайте внутри `<T>` комментарии, разделяющие текст или примыкающие к значимым пробелам. Vue может по-разному сохранять комментарии в разных сборках, а экстрактор отклоняет случаи, когда из-за этого хеш перевода зависит от сборки.